为了账号安全,请及时绑定邮箱和手机立即绑定

jquery实现返回网页顶部效果

标签:
JQuery

先了解一下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);不清楚的可以试一下

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消