位置: 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模块)

  • 荣耀50耳机怎么插(荣耀50耳机怎么用不了)

    荣耀50耳机怎么插(荣耀50耳机怎么用不了)

  • 淘宝付款方式怎么删除银行卡(淘宝付款方式怎么删除信用卡)

    淘宝付款方式怎么删除银行卡(淘宝付款方式怎么删除信用卡)

  • wps放图片进去怎么自由移动(图片放入wps后不清晰)

    wps放图片进去怎么自由移动(图片放入wps后不清晰)

  • 魅族 18 Pro支持杜比全景声吗(魅族18pro支持多少瓦)

    魅族 18 Pro支持杜比全景声吗(魅族18pro支持多少瓦)

  • 苹果12送耳机吗(现在苹果12送耳机吗)

    苹果12送耳机吗(现在苹果12送耳机吗)

  • oppo手机怎么让信息不显示(oppo手机怎么让字体变大一些)

    oppo手机怎么让信息不显示(oppo手机怎么让字体变大一些)

  • word文档上的横线怎么去掉(word文档上的横线怎么添加)

    word文档上的横线怎么去掉(word文档上的横线怎么添加)

  • 红米10x有呼吸灯吗(红米10x有呼吸灯功能吗)

    红米10x有呼吸灯吗(红米10x有呼吸灯功能吗)

  • 笔记本电脑自动右键怎么解决(笔记本电脑自动修复不了开不了机怎么办)

    笔记本电脑自动右键怎么解决(笔记本电脑自动修复不了开不了机怎么办)

  • 华为nova7为什么没有智能遥控(华为nova7为什么指纹不能用了)

    华为nova7为什么没有智能遥控(华为nova7为什么指纹不能用了)

  • matepad支持手写笔吗(matepad支持手写笔第二代吗)

    matepad支持手写笔吗(matepad支持手写笔第二代吗)

  • iqooneo3有压感按键吗(iqoo3有压感按键)

    iqooneo3有压感按键吗(iqoo3有压感按键)

  • 如何将一个word导入到另一个word(如何将一个word文档移动到另一个)

    如何将一个word导入到另一个word(如何将一个word文档移动到另一个)

  • 戴尔g3可以typec充电吗(戴尔G3可以加固态硬盘吗)

    戴尔g3可以typec充电吗(戴尔G3可以加固态硬盘吗)

  • 硬盘分区mbr还是guid(硬盘分区mbr什么意思)

    硬盘分区mbr还是guid(硬盘分区mbr什么意思)

  • 华为手机nova5z怎么截屏(华为手机nova5z怎么投屏)

    华为手机nova5z怎么截屏(华为手机nova5z怎么投屏)

  • word下标数字怎么打(word 下标数字)

    word下标数字怎么打(word 下标数字)

  • 如何修改淘宝首页(如何修改淘宝首页频道)

    如何修改淘宝首页(如何修改淘宝首页频道)

  • a1778 电信卡怎么解决(a1901电信卡)

    a1778 电信卡怎么解决(a1901电信卡)

  • 苹果11主卡副卡怎么切换(苹果11主卡副卡位置)

    苹果11主卡副卡怎么切换(苹果11主卡副卡位置)

  • ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

    ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

  • ipad双重认证是什么意思(双重认证ipad一直让输密码)

    ipad双重认证是什么意思(双重认证ipad一直让输密码)

  • 8p如何设置视频壁纸(苹果8视频设置)

    8p如何设置视频壁纸(苹果8视频设置)

  • 苹果xr录制屏幕在哪里(苹果xr录制屏幕怎么设置)

    苹果xr录制屏幕在哪里(苹果xr录制屏幕怎么设置)

  • 抖音购物车功能如何开通(抖音购物车功能介绍)

    抖音购物车功能如何开通(抖音购物车功能介绍)

  • 手机qq文件保存在哪里(手机qq文件保存在哪个文件夹)

    手机qq文件保存在哪里(手机qq文件保存在哪个文件夹)

  • 减免税款最终转到哪个科目?
  • 清理化粪池交什么印花税
  • 销售白酒是否要交消费税?
  • 对账结算流程
  • 增值税多提了怎么处理
  • 年报从业人数可以填一人吗
  • 个人生产经营所得税
  • 什么叫备品备件
  • 母公司捐赠资金给子公司
  • 19年高速公路免费时间
  • 印花税购销合同包括哪些
  • 主营业务收入计入
  • 对公账户发工资1万要交税吗
  • 中兴通技术维护费
  • 房地产项目结转条件
  • 从业人数和资产总额是灰色
  • 盘亏的设备做营业外支出的会计分录怎么处理?
  • 购买电脑的方案
  • 报关单有多个合同协议号
  • 外地建安个人所得税标准
  • 公司利润怎么提出来给老板
  • 事业单位会计科目表及解释
  • 公司股东认缴资质末到位导致公司破产应承担什么责任
  • 公司租入农民的房子好吗
  • 继承房产再出售满五是按老证还是按新证计算时间
  • mac电脑command键快捷设置
  • Win11安装如何跳过以太网
  • 进项发票失控怎么办
  • 向股东借款作为股东借款
  • 公益性捐赠增值税税率
  • 两名山地车骑手死亡
  • 显示器有必要买240hz吗
  • php curl cookie
  • 电子退库款
  • 行政单位基建账户可以建立吗为什么
  • 区块链网站模板
  • 电脑培训网络教学
  • 暂估入账会计科目
  • 小规模纳税人出租不动产税率是5%还是3%
  • 企业销售旧固定产品
  • 电子承兑操作
  • 织梦内容页模板修改
  • 税控盘抵减增值税
  • 计提工会经费是什么工资项目
  • 发票认证注意事项及细节
  • sqlserver2005安装失败
  • 三栏式明细账的借或贷怎么写
  • 房屋维修基金是谁交
  • 管理费用里面包括哪些明细科目
  • 劳务发票税率最新标准
  • 厂家给经销商的活动方案怎么写
  • 企业资金占用费利率
  • 公司做账开票是什么意思
  • 制造费用转入什么
  • 收到劳务公司代发工资怎么做账
  • 如何做好现金流
  • 营业成本如何设一级科目
  • win8.1开机进入桌面
  • win10系统回收站损坏了怎么恢复
  • mac电脑怎么装win10
  • centos zsh
  • windows7无法安装
  • 如何升级win10专业版
  • js抓取网页内容
  • 根据两点的经纬度计算航向角
  • shell案例讲解
  • node.js异步编程
  • node.js的理解
  • python中二维列表的定义
  • jquery 列表实现
  • python中else语句
  • jquery3.3.1
  • doctype报错
  • 工会经费什么时候交
  • 税务文书送达回证模板
  • 湖北税务发票查询系统网
  • 地税局网上报税
  • 浙江税务局网络发票页无法打字
  • 烟叶税额
  • 如何网上办税票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设