快捷導(dǎo)航

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

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

現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長(zhǎng)，所以都會(huì)設(shè)置這么一個(gè)按鈕，利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹一下吧

今天給大家介紹一下如何利用jQuery實(shí)現(xiàn)從任意地方返回頂部的功能，現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長(zhǎng)，所以都會(huì)設(shè)置這么一個(gè)按鈕，利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。廢話(huà)不多說(shuō)，下面就給出這么一個(gè)例子介紹一下，它是怎么實(shí)現(xiàn)的。

實(shí)現(xiàn)方法一：

<footer>
  <p class="ft-copyright">強(qiáng)仔仔 Design by Linzhiqaing 蜀ICP備11002373號(hào)-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="#頂部的一個(gè)ID"></a></div>
    <div style="float:left"><a id="gotop"></a></div>
  </div>
</footer>

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

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

實(shí)現(xiàn)方法二：

<footer>
  <p class="ft-copyright">強(qiáng)仔仔 Design by Linzhiqaing 蜀ICP備11002373號(hào)-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;//滑動(dòng)的速度
    $('body,html').animate({ scrollTop: 0 }, speed);
    return false;
  });
</script>

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

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

您可能感興趣的文章: