使用jquery返回頂端。

html：

1 <p><a id="back_to_top" οnclick="BackTop(this)"><i style="line-height:1px;font-size:30px" class="fa fa-angle-double-up" aria-hidden="true"></i></a></p>

?這里用font-awasome的向上圖標，也可以使用圖片來代替。

css：

1 #back_to_top{ 2 position:fixed; 3 right:3px; 4 bottom:3px; 5 height:44px; 6 width: 45px; 7 text-align:center; 8 padding-top:20px; 9 overflow: hidden; 10 cursor:pointer; 11 background-color:#FFFFAA; 12 z-index:10000; 13 }

?js：

1 //back to top 2 function BackTop() { 3 $(document).scrollTop(0) 4 } 5 $(function(){ 6 //當滾動條的位置處于距頂部100像素以下時，跳轉鏈接出現，否則消失 7 $(function () { 8 $(window).scroll(function(){ 9 if ($(window).scrollTop()>100){ 10 $("#back_to_top").fadeIn(1100); 11 } 12 else 13 { 14 $("#back_to_top").fadeOut(1100); 15 } 16 }); 17 18 //當點擊跳轉鏈接后，回到頁面頂部位置 19 20 $("#back-to-top").click(function(){ 21 $('body,html').animate({scrollTop:0},1000); 22 return false; 23 }); 24 }); 25 });

?這里使用jquery的fadeIn和fadeOut來動畫顯示圖標。效果如下：

?

轉載于:https://www.cnblogs.com/evilliu/p/8251205.html

總結

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

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