<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p></span> #back-to-top{position:fixed;display:none;bottom:100px;right:80px; } #back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;/*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s; } #back-to-top a:hover{color:#979797; } #back-to-top a span{background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;border-radius:6px;display:block;height:64px;width:56px;margin-bottom:5px;/*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s; } #back-to-top a:hover span{background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; } <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> $(function(){//當滾動條的位置處于距頂部100像素以下時，跳轉鏈接出現，否則消失 $(function () {$(window).scroll(function(){if ($(window).scrollTop()>100){$("#back-to-top").fadeIn(1500);}else{$("#back-to-top").fadeOut(1500);}});//當點擊跳轉鏈接后，回到頁面頂部位置 $("#back-to-top").click(function(){//$('body,html').animate({scrollTop:0},1000);if ($('html').scrollTop()) {$('html').animate({ scrollTop: 0 }, 1000);return false;}$('body').animate({ scrollTop: 0 }, 1000);return false; }); }); }); </script>

?

轉載于:https://www.cnblogs.com/yuan9580/p/11512950.html

總結

以上是生活随笔為你收集整理的js实现返回顶部功能的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。