js实现网页页面回到顶部
生活随笔
收集整理的這篇文章主要介紹了
js实现网页页面回到顶部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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实现网页页面回到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL创建函数，报错；SQL Err
- 下一篇： goaccess-nginx日志分析工具