一般的网站都有个回到顶部,回到顶部又有多种方法可以实现,

方法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仿知乎回到顶部功能相关推荐

  1. 浏览器 刷新页面后回到顶部_当你在浏览器中,忘记了曾经的登录密码怎么办......

    当你在浏览器中,忘记了曾经的登录密码怎么办... 前言 你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...

  2. 使用vue 刷新页面后state数据被清空的问题(刷新总是跳转到登陆页面)

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...

  3. 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法

    解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法 参考文章: (1)解决element-ui中el-m ...

  4. vue-router刷新页面后回到首页

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.[[点击跳转到网站.]] 今天给大家分享一个小知识点!注意查收! 平时我们再写vue项目配置完路由之后会发现他不会自动 ...

  5. 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  6. java浏览器刷新页面_使用js刷新浏览器页面

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])                                            ...

  7. html下拉框选择后自动刷新,html select 下拉框刷新页面后保留上一次选择的值

    常用场景 组合条件查询点击查询/刷新页面,包括input输入框\复选框等在内的组件都可以通过前端设置value="{{id}}",后台发送的数据包括对应的字段,从而实现刷新后保留上 ...

  8. selenium关闭浏览器当前页面后,切换到最后一个页面继续操作

    问题: 有时候用selenium操作浏览器,打开多个页面后,在不用的时候,需要关掉,切换页面需要切换句柄,关掉页面后,也需要重新切换句柄,否则页面接着操作元素会出问题 解决方法: import tim ...

  9. vue中tab选项卡刷新页面后保持选中状态_Altium Designer中的快捷键汇总

    双十一活动详情请联系客服了解 在任何软件环境中,为了提高工作效率,你可以做的一件事就是学习快捷键.击键比将鼠标小心地放在按钮上或点击菜单来查找命令更有效,一旦用熟悉了,它们就变成了您的第二天性.本文将 ...

最新文章

  1. 关于log4net使用中遇到的错误
  2. bzoj 1095: [ZJOI2007]Hide 捉迷藏
  3. git 和 vim 学习笔记
  4. thinkphp5调用shell脚本_thinkphp5.x全版本任意代码执行getshell
  5. 2017-2018-2 20155303『网络对抗技术』Final:Web渗透获取WebShell权限
  6. 多线程面试题系列(12):多线程同步内功心法——PV操作上
  7. 为什么国外程序员加班少?他们这样评价国内996和技术公众号
  8. EXCHANGE 2003 恢复存储组的使用
  9. 终极算法 机器学习和人工智能如何重塑世界
  10. 移动芯片巨头英国ARM的发展史
  11. 马士兵oracle_,马士兵oracle视频教程学习笔记个人整理
  12. MySQL--备份还原常用命令
  13. 17届华为杯数学建模大赛B题代码
  14. WPS表格 JSA-单格内,按文字颜色处理文字
  15. 论 Erda 的安全之道
  16. 一步教你溯源【钓鱼邮件】的IP地址
  17. B2B电子商务策略[在2022年发展您的业务]
  18. 小C语言–词法分析程序
  19. 象牙色优雅图像LR预设
  20. 盲图像超分辨率重建 ( CVPR,2022) (Pytorch)(附代码)

热门文章

  1. IPv6下CDN和网络的最佳实践
  2. Tencent Blade team荣获小米安全年度最佳守护者
  3. 腾讯专有云研发过程首次披露
  4. 做WebRTC,千万别把媒体和信令混在一起
  5. srs代码学习(4)-怎么转发流
  6. android和ios HybridApp的js交互
  7. ubuntu 允许root用户登陆ssh
  8. JAVA程序设计----多线程(上)
  9. 左神算法:加强堆的实现(Java)
  10. oh-my-zsh 国内网络快速安装方法 | How to install oh-my-zsh in China