实际效果
// 阻力，数值越大，滑动越慢
const drag = 10;
// 滑动到顶部
const scrollToTop = () => {
// 距离顶部的距离
const gap = document.documentElement.scrollTop || document.body.scrollTop;
if (gap > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, gap - gap / drag);
}
};
scrollToTop();
【核心知识点】：drag越大，页面滑动速度越慢。反之，则快。
本系列旨在通过最直接的事例最完整的代码，解决一些开发中常遇到的实际问题。
有喜欢的朋友可以关注我呦～
【核心知识点】：drag越大，页面滑动速度越慢。反之，则快。 本系列旨在通过最直接的事例最完整的代码，解决一些开发...
场景：当页面滚动超过一定距离后，显示回到顶部的按钮，点击按钮平滑滚动回顶部。 实现：监听页面滚动距离，与一特定值比...
如何分辨设备是移动设备还是桌面设备？ 如何获取当前页面的滚动位置？ 如何平滑滚动到页面顶部？ 如何创建一个包含当前...
一、页面滚到一定位置，触发某个点击事件，让页面回到顶部.
js 返回到页面顶部，含有渐变或者动画效果 点击返回顶部按钮，页面逐渐向上回到顶部： js 返回到页面顶部，直接返...
点击锚点平滑滚动到相应页面位置： .. "返回顶部"按钮效果：向下滚动页面出现 按钮，点击返回顶部。 …………EN...
1.当用户点击刷新页面滚到顶部 页面为静态内容，刷新后还留在之前的位置。要等页面加载完成之后再处理回滚到顶端。设置...
js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquer...
隐藏所有指定的元素 检查元素是否具有指定的类 如何切换一个元素的类? 获取当前页面的滚动位置 平滑滚动到页面顶部 ...
效果图 功能：类似这样，点击哪个，页面平滑滚到相应位置，同时页面滚动的时候，tab栏能自动响应html代码 就是这...
本文标题：快速掌握—JS如何实现页面平滑的滚到顶部
本文链接：https://www.haomeiwen.com/subject/yxkvactx.html
网友评论