所需js文件
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
在body中添加
<a id="goTop" class="gotoTop" href="#"><img src="images/top.png"></a>
.gotoTop的style样式
.gotoTop { display: none; bottom: 20px; height: 70px; position: fixed; right: 20px; width: 70px; }
js函数
$(function () { $("#goTop").click( function(){$(‘html,body‘).animate({scrollTop:0},700);}//滚动条的垂直位置设为0,页面移动速度为700 ) $(window).scroll(function(){ var s = $(window).scrollTop(); //返回滚动条的垂直位置 if( s > 0){ $("#goTop").fadeIn(100); }else{ $("#goTop").fadeOut(200); }; }); })
如此,即可实现回到顶部的功能。
时间: 2024-10-11 01:50:58