位置: 编程技术 - 正文
jQuery中页面返回顶部的方法总结(jquery返回顶部)
编辑：rootadmin推荐整理分享jQuery中页面返回顶部的方法总结(jquery返回顶部)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery返回上一个页面,jquery 设置和返回元素属性,jquery 设置和返回元素属性,jquery返回表单字段,jquery return,jquery 设置和返回元素属性,jquery返回顶部代码,jquery返回上一个页面,内容如对您有帮助，希望把文章链接给更多的朋友！
当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法，下面说下各方法及优缺点。
方法一 锚点定位
这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。
方法二 window.scrollTo(x,y)
这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。
scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，比如我设置scrollTo(,)，就是让滚动内容的坐标（,）的点处在视口的左上角。
方法三 设置带有动画效果的滚动
原生方法
大概的思路就是：
为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮
为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以5的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。
jQuery方法
jQuery方法只是在js代码部分不同，具体代码如下
jQuery方法的优点是方便，而且动画效果比较流畅。
这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象，因为我们是要设置body的scrollTop属性。
总结
三个方法各有优劣，不过总体来讲，jQuery的方法更适合大多数场景。
以上所述是小编给大家介绍的jQuery中页面返回顶部的方法总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
jQuery Ajax 实现在html页面实时显示用户登录状态 当网站是全静态的html页面时，而又希望网站会员在登录之后并在所有页面头部显示登录状态，如用户名等，如果未登录就是未登录状态，下面给大家来
jQuery实现可拖拽3D万花筒旋转特效 这是一个使用了CSS3立体效果的强大特效，本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时，环形图片墙可以跟随鼠标进行3D旋转动画。进去后
jquery实现下拉框多选方法介绍 一、说明本文是利用EasyUI实现下拉框多选功能，在ComboxTree其原有的基础上对样式进行了改进，样式表已上传demo，代码如下二、代码!DOCTYPEhtmlPUBLIC"-//W3C//
标签: jquery返回顶部
本文链接地址:https://www.jiuchutong.com/biancheng/374027.html 转载请保留说明！上一篇：jQuery中select与datalist制作下拉菜单时的区别浅析
下一篇：jQuery Ajax 实现在html页面实时显示用户登录状态
