主要是利用 window.scrollTo() 属性
方法1:如下,直接给定滚动距离+行为,
// 获取跳转元素的位置
var position = document.getElementById(`${href}`).offsetTop + 200;
window.scrollTo({
top: position,
behavior: "smooth",
});
方法二:如下,利用window.requestAnimationFrame() :
requestAnimationFrame是基于帧数
的,requestAnimationFrame 会把每一帧中的所有DOM操作
集中起来,在一次重绘或回流中就完成
,这样就会减少重绘和回流,使得动画更流畅,
window.requestAnimationFrame(func) 这个方法接受一个函数为参数,该函数会在浏览器下一次重绘前调用
,开发人员可以用这个特性结合递归来更好的操作动画
// 回到顶部
GoTop() {
(function smoothscroll() {
var currentScroll =
// scrollTop滚动条距离顶部的距离
document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll - currentScroll / 5);
}
})();
},