本實戰來自個人研究，不一定是最好的！

僅支持IE8及以上版本！

?

HTML:

1 <!--回到頂部 開始-->
2     <div id="to_top" class="to_top">
3         <i class="to_top_pic"></i>
4     </div>
5 <!--回到頂部 結束-->

?

CSS:

1 /*回到頂部按鈕，切忌初始化不要用float、position(absolute,relative,fixed)等脫離文檔的定位*/
2 #to_top {
3     width: 50px;
4     height: 50px;
5     margin: 500px 0 0 1020px;
6     background: #efefef;
7     /*position: fixed;*/
8     /*top: 0;*/
9 }

?

JS:

/*** 回到頂部* */var toTopDistance = 700;//偵聽滾動事件$(window).on('scroll', function () {//console.log($(document).scrollTop());//console.log(toTopDistance);/*** 滾到一定程度，回到頂部按鈕一直顯示在右上方*/if($(document).scrollTop() >= toTopDistance) {$('#to_top').css({'position': 'fixed','top': 0,'margin': '0 0 0 1020px'});}else {$('#to_top').css({'position': 'static','margin': '500px 0 0 1020px'});}});

?

轉載于:https://www.cnblogs.com/lqcdsns/p/5514976.html

總結

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

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