继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery实现返回网页顶部效果

linux零基础学习视频
关注TA
已关注
手记 276
粉丝 29
获赞 122

先了解一下scrollTop的属性:

有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

利用animate来设置html,body的scrollTop的值为0来实现返回到顶部,例: <div id="scroll"><a title="返回顶部" href="javascript:void(0)"></a></div>

<script type="text/javascript">
  $(document).ready(function(){   
     $("#scroll").click(function(){
     $("html,body").animate({scrollTop: 0}, 1000);
      });
});
</script>

animate的第二个属性为滑动的速度,主要连接a的href属性设为javascript:void(0),如果设为“#”,大家可以试一下,在点击链接时链接会先快速的返回到顶部,且没有任何效果,之后才会执行 $("html,body").animate({scrollTop: 0}, 1000);不清楚的可以试一下

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP