快捷導(dǎo)航

如何利用JQuery實現(xiàn)從底部回到頂部的功能

更新時間：2016年12月27日 09:22:36 作者：xw1985520

現(xiàn)在大部分網(wǎng)站因為篇幅比較長，所以都會設(shè)置這么一個按鈕，利用這個按鈕可以實現(xiàn)從底部返回頂部的功能。下面通過實例代碼給大家簡單介紹一下吧

今天給大家介紹一下如何利用jQuery實現(xiàn)從任意地方返回頂部的功能，現(xiàn)在大部分網(wǎng)站因為篇幅比較長，所以都會設(shè)置這么一個按鈕，利用這個按鈕可以實現(xiàn)從底部返回頂部的功能。廢話不多說，下面就給出這么一個例子介紹一下，它是怎么實現(xiàn)的。

實現(xiàn)方法一：

<footer>
  <p class="ft-copyright">強仔仔 Design by Linzhiqaing 蜀ICP備11002373號-1</p>
  <div id="tbox">
    <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
      <img src="images/weixing-ma.jpg">
    </div>
    <div style="float:right;"><a id="togbook" href="#頂部的一個ID"></a></div>
    <div style="float:left"><a id="gotop"></a></div>
  </div>
</footer>

這第一個方法比較簡單，就是在超鏈接中寫上“#頂部的ID”就可以實現(xiàn)回到頂部的功能了，不過如果是這種方法的話就不會出現(xiàn)那種滑動的效果，交互性不太好。

下面在介紹一種可以實現(xiàn)滑動的回到頂部功能，并且可以自己設(shè)置滑動的速度和回到頂部的位置等。推薦大家用這種模式實現(xiàn)回到頂部的功能，下面來實現(xiàn)的例子。

實現(xiàn)方法二：

<footer>
  <p class="ft-copyright">強仔仔 Design by Linzhiqaing 蜀ICP備11002373號-1</p>
  <div id="tbox">
    <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
      <img src="images/weixing-ma.jpg">
    </div>
    <div style="float:right;"><a id="togbook" href="#"></a></div>
    <div style="float:left"><a id="gotop"></a></div>
  </div>
</footer>
<script type="text/javascript">
  $("#gotop").click(function () {
    var speed=200;//滑動的速度
    $('body,html').animate({ scrollTop: 0 }, speed);
    return false;
  });
</script>

通過寫一段js代碼就可以實現(xiàn)回到頂部的功能了，是不是特別簡單啊。

以上所述是小編給大家介紹的如何利用JQuery實現(xiàn)從底部回到頂部的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: