位置: 编程技术 - 正文

jQuery中页面返回顶部的方法总结(jquery返回顶部)

编辑:rootadmin

推荐整理分享jQuery中页面返回顶部的方法总结(jquery返回顶部),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery返回上一个页面,jquery 设置和返回元素属性,jquery 设置和返回元素属性,jquery返回表单字段,jquery return,jquery 设置和返回元素属性,jquery返回顶部代码,jquery返回上一个页面,内容如对您有帮助,希望把文章链接给更多的朋友!

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。

方法一 锚点定位

这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。

方法二 window.scrollTo(x,y)

这种方法也很方便,并且不会刷新页面,缺点是没有滚动效果。

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标,比如我设置scrollTo(,),就是让滚动内容的坐标(,)的点处在视口的左上角。

方法三 设置带有动画效果的滚动

原生方法

jQuery中页面返回顶部的方法总结(jquery返回顶部)

大概的思路就是:

为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页面实时显示用户登录状态

  • 政府补助利得要交企业所得税吗怎么算
  • 企业所得税税前扣除吗
  • 领的增值税专用发票如何录入电脑
  • 公司刚成立没有收入但是有支出怎么记账
  • 增值税交错了退税怎么退
  • 税务局代个人开发票交什么税
  • 回单一定要在开户行打吗
  • 设计费用计入产品成本吗
  • 存出资本保证金是金融资产吗
  • 介质申报和网络申报的区别
  • 工伤职工应享有的待遇及救济途径
  • 补充协议如何生效
  • 运输费计入采购成本的分录
  • 公司无公务用车
  • 用理财产品去抵债违法吗
  • 海关的消费税怎么计算
  • 农产品初加工免征企业所得税
  • 旅游公司发票企业能报销吗
  • 税务局金四上线
  • 小规模免增值税印花税用交吗
  • 劳务公司差额征收税率是多少
  • 法院执行费怎么收取法律依据
  • 总分机构异地移送
  • 香港公司的法人叫什么
  • 1697511157
  • 公司职员培训与管理
  • 应付职工薪酬年底怎么结转
  • 花语大全各种花的花语花树
  • 代扣个税手续费返还增值税税率
  • 公司备用金属于夫妻财产吗
  • 办理营业执照费用和流程
  • 投资性房地产出售
  • phpget方法
  • 快递收据能否作为发票
  • php 表单
  • 送货上门需要其他费用吗
  • php数组内容替换
  • php获取当前页面
  • vue设置宽度
  • php redis使用
  • 本期收入及免税收入
  • thinkphp import
  • rc远程桌面
  • 销售退货和折让是收入吗?吗?
  • phpcms官网打不开
  • 合伙企业所得税征收方式
  • 一般纳税人怎么开3个点普票
  • 用友t3采购订单怎么录入
  • 运输公司汽车折旧能直接进主营成本吗
  • 净资产增加是好还是坏
  • 资本公积的核算维度是什么
  • 银行承兑汇票到期无力支付计入什么科目
  • 红冲发票视频教程
  • 资产减值准则规范
  • 如何修改mysql用户名
  • fedora系统
  • win8停止服务
  • windows资源管理器停止工作怎么办
  • winspool.drv病毒
  • mac os 如何备份
  • archlinux ip地址
  • 在linux系统中
  • 2015.3.25--2.cocos精灵移动 动画控制(一)
  • unity脚本如何运行
  • css svg滤镜
  • js写贪吃蛇什么水平
  • javascript重点
  • nodejs命令行参数解析
  • nodejs操作mysql
  • 安卓下载手游
  • jquery动态设置div高度
  • google年会
  • jquery编写页面载入事件
  • 国家税务总局12366上海(国际)纳税服务中心
  • 不同地区的社保卡通用吗
  • 河北省2021城乡居民医保优惠新政策
  • 重庆办理4050社保需要什么材料
  • 房子有注册公司可以卖吗
  • 税务ukey登录界面
  • 江苏税务局网上预缴税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设