<script language="javascript"> $(function(){var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt).click(function() {$("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() {var st = $(document).scrollTop(), winh = $(window).height();(st > 0)? $backToTopEle.show(): $backToTopEle.hide();//IE6下的定位if (!window.XMLHttpRequest) {$backToTopEle.css("top", st + winh - 166);} }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); }); </script>

css樣式，完成在頁面右下邊欄豎向顯示“返回頂部”4個字

<style> /*返回頂部*/ .backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);} </style>

?

轉載于:https://www.cnblogs.com/kennyhr/p/3472481.html

總結

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

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