今天給大家介紹一下如何利用jQuery實現從任意地方返回頂部的功能，現在大部分網站因為篇幅比較長，所以都會設置這么一個按鈕，利用這個按鈕可以實現從底部返回頂部的功能。廢話不多說，下面就給出這么一個例子介紹一下，它是怎么實現的。
實現方法一：
<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”就可以實現回到頂部的功能了，不過如果是這種方法的話就不會出現那種滑動的效果，交互性不太好。
下面在介紹一種可以實現滑動的回到頂部功能，并且可以自己設置滑動的速度和回到頂部的位置等。推薦大家用這種模式實現回到頂部的功能，下面來實現的例子。
實現方法二：
<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代碼就可以實現回到頂部的功能了，是不是特別簡單啊。
以上所述是小編給大家介紹的如何利用JQuery實現從底部回到頂部的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
