使用jquery返回顶端。
html:
1 <p><a id="back_to_top" onclick="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 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来动画显示图标。效果如下: