浏览器 刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现,
方法1:
在css中添加
html {scroll-behavior: smooth;
}
然后在回到顶部按钮上加一个a标签,herf属性写顶部标签的id即可。
例如:
<a href="#top"><div id="one">点我回到顶部</div>
</a>
这样就可以很平滑地回到顶部。不需要用到JavaScript,速度是均匀的,并且不是很快。
方法2:
可以在回到顶部按钮上加一个点击事件:
document.querySelector('回到顶部按钮').onclick = () => { scrollTo(0, 0) }
这样就可以了。只不过这样是瞬间登顶。
function smoothScrollToTop() {window.scrollTo({left: 0,top: 0,behavior: 'smooth'})
}
document.getElementById('回到顶部按钮').onclick = smoothScrollToTop;
写成这样就可以达到和方法1一样的效果。
-----------------------------------
方法3:
HTML5有一个api,可以将指定的元素滑动到页面的可视区域中来。
element.scrollIntoView({behavior: 'auto | smooth | auto(default)',block: 'start | center | end | nearest (default)'
})
可以设置成点击回到顶部按钮就把页面最上面的那个元素滑动到window的可视区域,元素的顶部与窗口顶部对齐。这样也可以达到目的。
(本质上其实和方法1没什么区别)
function smoothScrollToTop() {document.getElementById("top").scrollIntoView({ block: "start", behavior: "smooth" })
}
document.getElementById("scrollToTopButton").onclick = smoothScrollToTop;
//top就是最顶部元素地id,scrollToTopButton就是回到顶部按钮地id
-----------------------------------
既然要模仿知乎的回到顶部,自然就需要用到JavaScript了。知乎的回到顶部是变速的,刚开始很快,而后越来越慢,最后一帧非常慢。猜测是每次往前移动一定的比例。
方法4:
可以用scrollTo()函数来模拟,一次性scrollTo(0,0)是瞬间移动,那么多scrollTo()几次,每次往上移动一定的比例就可以做出。
先用 window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop 获取当前页面回到顶部需要滑动的高度。然后使用scrollTo()函数滑动到高一点的某个地方。
屏幕的刷新率一般是60hz,那就每一秒钟调用scrollTo()函数60次吧。经过多次调试,每次往上滑动当前高度的大约15%最接近知乎回到顶部的实际效果。
//setInterval版
function smoothScrollToTop() {let smoothScrollToTopSetInterval = setInterval(() => {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);clearInterval(smoothScrollToTopSetInterval);}}, 1000 / 60)
}document.getElementById('回到顶部按钮').onclick = smoothScrollToTop;
鉴于setInterval经常被诟病,在页面卡死时可能出一些奇怪的问题,那就改造一下,改成setTimeout。
//setTimeout版
function fnScroll() {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);}
}
function smoothScrollToTop() {setTimeout(() => {fnScroll();let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 0) {smoothScrollToTop();}}, 1000 / 60);
}
document.getElementById('回到顶部按钮').onclick = smoothScrollToTop;
实际效果https://www.zhihu.com/video/1189228293793099776
但是用setTimeout还是可能会被工头骂,怎么办?
那就只好搬出requestAnimationFrame这个api了。
方法5:
用requestAnimationFrame改造一下方法4,
function smoothScrollToTop() {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {window.requestAnimationFrame(smoothScrollToTop);scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);}
}
document.getElementById('回到顶部按钮').onclick = smoothScrollToTop;
完结撒花!
浏览器 刷新页面后回到顶部_JavaScript仿知乎回到顶部功能相关推荐
- 浏览器 刷新页面后回到顶部_当你在浏览器中,忘记了曾经的登录密码怎么办......
当你在浏览器中,忘记了曾经的登录密码怎么办... 前言 你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...
- 使用vue 刷新页面后state数据被清空的问题(刷新总是跳转到登陆页面)
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法 参考文章: (1)解决element-ui中el-m ...
- vue-router刷新页面后回到首页
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.[[点击跳转到网站.]] 今天给大家分享一个小知识点!注意查收! 平时我们再写vue项目配置完路由之后会发现他不会自动 ...
- 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
- java浏览器刷新页面_使用js刷新浏览器页面
reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) ...
- html下拉框选择后自动刷新,html select 下拉框刷新页面后保留上一次选择的值
常用场景 组合条件查询点击查询/刷新页面,包括input输入框\复选框等在内的组件都可以通过前端设置value="{{id}}",后台发送的数据包括对应的字段,从而实现刷新后保留上 ...
- selenium关闭浏览器当前页面后,切换到最后一个页面继续操作
问题: 有时候用selenium操作浏览器,打开多个页面后,在不用的时候,需要关掉,切换页面需要切换句柄,关掉页面后,也需要重新切换句柄,否则页面接着操作元素会出问题 解决方法: import tim ...
- vue中tab选项卡刷新页面后保持选中状态_Altium Designer中的快捷键汇总
双十一活动详情请联系客服了解 在任何软件环境中,为了提高工作效率,你可以做的一件事就是学习快捷键.击键比将鼠标小心地放在按钮上或点击菜单来查找命令更有效,一旦用熟悉了,它们就变成了您的第二天性.本文将 ...
最新文章
- 关于log4net使用中遇到的错误
- bzoj 1095: [ZJOI2007]Hide 捉迷藏
- git 和 vim 学习笔记
- thinkphp5调用shell脚本_thinkphp5.x全版本任意代码执行getshell
- 2017-2018-2 20155303『网络对抗技术』Final:Web渗透获取WebShell权限
- 多线程面试题系列(12):多线程同步内功心法——PV操作上
- 为什么国外程序员加班少?他们这样评价国内996和技术公众号
- EXCHANGE 2003 恢复存储组的使用
- 终极算法 机器学习和人工智能如何重塑世界
- 移动芯片巨头英国ARM的发展史
- 马士兵oracle_,马士兵oracle视频教程学习笔记个人整理
- MySQL--备份还原常用命令
- 17届华为杯数学建模大赛B题代码
- WPS表格 JSA-单格内,按文字颜色处理文字
- 论 Erda 的安全之道
- 一步教你溯源【钓鱼邮件】的IP地址
- B2B电子商务策略[在2022年发展您的业务]
- 小C语言–词法分析程序
- 象牙色优雅图像LR预设
- 盲图像超分辨率重建 ( CVPR,2022) (Pytorch)(附代码)