位置: 编程技术 - 正文

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

  • 小规模纳税人转一般纳税人
  • 销项税是什么意思进项税是什么意思
  • 预期报酬率和期望报酬率一样吗
  • 预计负债的三个基本要素
  • 工亡赔偿金如何支付
  • 进项税额结转不结转
  • 单位搬迁员工怎么办
  • 权益法下被投资企业净资产增加
  • 计提存货减值准备怎么算
  • 出口货物退运管理办法
  • 不锈钢交几个点税
  • 印花税计算公式例子
  • 汇算清缴是啥
  • 如何界定广告
  • 增值税扣税凭证抵减销项税额
  • 销售已使用过的固定资产增值税
  • 个体工商户是否需要报税
  • 撤回投资属于什么会计科目
  • 子公司能转让吗
  • 员工离职再入职要重新签订合同吗
  • 加工业务怎么报税的
  • 哪些企业所得税汇算清缴
  • 工资薪金所得税率表2023
  • 企业买的商业保险退款怎么做账
  • 资产减值损失怎么影响利润
  • 完工百分比法确认收入应注意的问题
  • 增值税发票税率怎么算
  • linux开机出现grub解决方法
  • 实际投资收益率等于什么
  • php缩放图片
  • mmtraylsi.exe是什么进程 有什么作用 mmtraylsi进程查询
  • 华为路由器怎么设置wifi密码
  • 开发产品完工结转
  • 德比郡在哪
  • 购进运输服务取得的增值税专用发票准予抵扣进项税额吗
  • 财务费用的核算属于什么业务
  • 手把手教你win7换主板不重装系统的方法
  • uniapp中使用amap-vue,设置安全密钥
  • php mkdir
  • 园林绿化工程公司排名
  • 企业所得税中工资总额
  • 公司间代收款需要开票吗
  • 银行罚息是财务收入吗
  • 如何利用税收经济效应实现税收的宏观调控目标
  • 比赛奖金怎么做账
  • 进项税额转出会计分录
  • 专项储备期末有余额吗
  • 纳税人应按照当期可抵扣进项税额的10%
  • 企业出售自用房产增值税
  • 小规模纳税人按1%
  • 预付账款货物到了之后怎么入账
  • 如何解决私账流失问题
  • 投资性房地产涉及其他综合收益
  • 应交税费借方余额填列资产负债表
  • 企业软件开发哪家好
  • 报关单不在海关信息中
  • 水果店的账务处理
  • 工程异地预缴的税款可以抵机构所在地的税金吗
  • 专栏设计模板
  • 关于中秋节的古诗
  • sql server的实例
  • sqlserver多表关联查询
  • win8.1还原系统
  • u盘发光
  • windows8.
  • windows字幕软件
  • windowsxp如何清理磁盘
  • xp系统奇怪
  • 苹果官网
  • 如何在windows上打开蓝牙
  • windows关机音乐
  • SpriteBuilder Demo学习笔记
  • androidui布局
  • 简述linux与windows相比,有哪些优势
  • node-js
  • javascript要学哪些
  • javascript面向对象精要pdf下载
  • jQuery使用ajax跨域获取数据的简单实例
  • 护肤品关税税率
  • 贷款抵押担保合同
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设