位置: IT常识 - 正文

这几种方法帮你快速实现回到页面顶部(怎样才能帮你)

编辑:rootadmin
背景介绍 当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。 如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直 ... 背景介绍

推荐整理分享这几种方法帮你快速实现回到页面顶部(怎样才能帮你),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:怎么去帮助,这几种方法帮你解决问题,教我怎么帮助,几种方法帮你消除口臭,这几种方法帮你解决问题,这几种方法帮你做事,这几种方法帮你做事,这几种方法帮你做事,内容如对您有帮助,希望把文章链接给更多的朋友!

当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。

如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直接回到页面的顶部,这种方式简单粗暴;另外一种则是自动滚动间接回到页面顶部,这样一来视觉体验上可能更好,但是用户需要过几秒才能看到顶部内容。

例如掘金,在滚动到一定高度时会出现“回到顶部”按钮,点击后会直接回到页面顶部,就是上文说到的第一种情况。

实现动态显示滚动按钮这几种方法帮你快速实现回到页面顶部(怎样才能帮你)

“回到顶部”并不是一直显示的,而是滚动到一定值才出现的,因此应该在window.onscroll里定义一个判断事件。

window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; // 页面滚动超过300px就显示 if (currentHeight > 300) { document.getElementById('backtop').style.display = 'block' } else { document.getElementById('backtop').style.display = 'none' }}直接回到顶部锚点

最简单的方法。给顶部的div一个id,点击直接回到这个div元素,但是URL上会出现#top。

<div id="top"></div>......<a href="#top">回到顶部</a>scrollTo函数

控制滚动条回到指定位置,第一个参数是距离页面左端的距离,第二个参数是距离页面顶部的距离。

<a href="javascript:scrollTo(0, 0)">回到顶部</a>scrollTop函数

控制滚动条垂直偏移。

<a onclick="byScrollTop()">回到顶部</a>......function byScrollTop() { document.documentElement.scrollTop = 0; window.pageYOffset = 0; // 兼容ios document.body.scrollTop = 0; // 兼容低版本ie}scrollBy函数

该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素,第二个参数指向下滚动的参数,负数可使方向相反。

<a onclick="byScrollBy()">回到顶部</a>......function byScrollBy() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -topHeight);}间接回到顶部定时器实现滚动动画

通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题,就是当页面内容十分多的时候,这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话,可能会长达10秒钟,这对用户体验来说是不友好的。

<a onclick="scrollToTop()">回到顶部</a>......function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -100); // 模拟鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 清除滚动事件,避免无法向下移动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; }}定时器实现滚动动画-改良版

基于上面这个问题,我们可以设置一个速度的最小值,让滚动速度从快到慢,但也不至于过慢。

function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var speed = topHeight / 10 > 100 ? topHeight / 10 : 100; scrollBy(0, -speed); // 模拟鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 清除滚动事件,避免无法向下移动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; }}最终效果

完整代码<style> a { display: block; } #top { height: 2000px; background-color: #999 } #backtop { display: none; position: fixed; bottom: 20px; right: 30px; background-color: #fff; z-index: 9; }</style><body> <div id="top"> 这里是页面顶部 </div> <div id="backtop"> <a href="#top">回到顶部-锚点</a> <a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数</a> <a onclick="byScrollTop()">回到顶部-scrollTop函数</a> <a onclick="byScrollBy()">回到顶部-scrollBy函数</a> <a onclick="scrollToTop()">回到顶部-定时器动画版</a> </div> <script> window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; console.log(currentHeight, "currentHeight"); if (currentHeight > 300) { document.getElementById('backtop').style.display = 'block' } else { document.getElementById('backtop').style.display = 'none' } } function byScrollTop() { document.documentElement.scrollTop = 0; window.pageYOffset = 0; // 兼容ios document.body.scrollTop = 0; // 兼容低版本ie } function byScrollBy() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -topHeight); } function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var speed = topHeight / 10 > 100 ? topHeight / 10 : 100; scrollBy(0, -speed); // 模拟鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 清除滚动事件,避免无法向下移动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; } } </script></body>
本文链接地址:https://www.jiuchutong.com/zhishi/304086.html 转载请保留说明!

上一篇:电脑学习网强推wordpress专业缓存插件Redis Object Cache Pro对象缓存专业授权版傻瓜化使用教程(网上学电脑的软件)

下一篇:python中getopt模块是什么(python getpass模块)

  • 增值税年末结转的会计处理
  • 经营租赁的税务编码是什么
  • 计提环境保护税怎么计算
  • 新公司成立后的第一个文件是什么
  • 增值税票购买份数满了怎么办
  • 电子税务局中在哪看本月开票统计表
  • 职工教育经费能结转几年
  • 房地产企业拆迁安置土地增值税清算疑点
  • 电子承兑过期后怎么兑现处理合适呢?
  • 承兑汇票私人贴现账务怎么处理
  • 去年的库存
  • 分配结转制造费用会计分录怎么写?
  • 自行建造固定资产的计税基础
  • 银行开户许可证什么时候开始取消的
  • 分公司注销所得税
  • 承接所有业务
  • 开票未收到款会计分录
  • 已抵扣发票红冲后发票还给对方公司
  • 纳税人转让2016年以后的土地使用权
  • 支付职工补贴计入什么科目
  • 给员工发的慰问短信
  • 进项5万出项6万,需交多少税
  • 职工教育法
  • 出口佣金会计分录
  • 房地产公司基础设施建设费包括哪些费用
  • 股权变更之后税务变更
  • 联营商场如何交增值税?
  • 开发企业售楼处工作内容
  • 企业收到的贷款会计分录
  • 临时工工资怎么处理
  • 在win7系统中怎样为另外一块硬盘安装系统
  • safedownloader是什么
  • centos apache配置文件
  • 评估价格是按原值还是净值
  • 日记账和总账一般采用
  • 土地使用税的税目写什么
  • PHP:curl_share_init()的用法_cURL函数
  • windows搜索点不动
  • 克拉莫16首
  • php://input用法
  • (二) Vue3 + Element-Plus 实现动态菜单栏
  • 固定资产自行建造的会计处理
  • 会计编录怎么做
  • 事业单位长期应付款怎么核销
  • 人脸清晰化神器软件
  • 金税盘锁死状态
  • 前端脚本开发
  • .patch文件
  • 车险开的发票里有代收车船税吗
  • 停车场广告收入需要每年缴纳增值税吗?
  • 100万的工程怎么开发票
  • phpcms 标签
  • 工地购买的厨房用品计入哪个科目
  • 企业自建办公楼需要开发资质吗
  • 办公室装修用什么材料便宜
  • 基本社会保险制度范围
  • 出售金融资产计入
  • 原材料的计划成本分录
  • 酒店的布草怎么铺
  • 取得投资时支付的相关税费
  • linux解释
  • cmd命令怎么进入d盘文件夹
  • vmp.exe是什么
  • XP系统怎么安装打印机
  • 新买的读卡器不读卡,提示放入驱动盘
  • 怎么删除多余的word的页数
  • win10 电脑
  • SIMETER.EXE - SIMETER是什么进程 有什么用
  • linux批量清空文件内容
  • win7系统配置怎么设置
  • 四步制作的花
  • 安卓应用程序数据
  • python如何进行线程操作
  • 如何设置div自适应宽度
  • jQuery中的select操作详解
  • jquery 插件写法
  • js最简单的代码
  • Android Studio:adb not responding
  • 王军调研地税局的职务
  • 湖南省国家税务局历任局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设