没有jQuery的scrollTopanimation

我试图做一个animation“滚动到顶部”的效果，而不使用jQuery。

在jQuery中，我通常使用这个代码：

$('#go-to-top').click(function(){ $('html,body').animate({ scrollTop: 0 }, 400); return false; }); 

如何animationscrollTop而不使用jQuery？

Answer 1

HTML：

 <button onclick="scrollToTop(1000);"></button> 

1＃JavaScript（线性）：

 function scrollToTop(scrollDuration) { var scrollStep = -window.scrollY / (scrollDuration / 15), scrollInterval = setInterval(function(){ if ( window.scrollY != 0 ) { window.scrollBy( 0, scrollStep ); } else clearInterval(scrollInterval); },15); } 

2＃JavaScript（轻松进出）：

 function scrollToTop(scrollDuration) { const scrollHeight = window.scrollY, scrollStep = Math.PI / ( scrollDuration / 15 ), cosParameter = scrollHeight / 2; var scrollCount = 0, scrollMargin, scrollInterval = setInterval( function() { if ( window.scrollY != 0 ) { scrollCount = scrollCount + 1; scrollMargin = cosParameter - cosParameter * Math.cos( scrollCount * scrollStep ); window.scrollTo( 0, ( scrollHeight - scrollMargin ) ); } else clearInterval(scrollInterval); }, 15 ); } 

注意：

• 持续时间（毫秒）（1000ms = 1s）
• 第二个脚本使用cos函数。 示例曲线 ：

由于选民数量众多，我重新检查了几年前我写的代码，并试图优化它。 更进一步，我在代码的底部添加了一些math解释。

更新（轻松进出）：

对于更平滑的幻灯片/animation，使用requestAnimationFrame方法完成。 （在大窗口中会出现一点点的口吃，因为浏览器必须重绘大面积）

 function scrollToTop(scrollDuration) { var cosParameter = window.scrollY / 2, scrollCount = 0, oldTimestamp = performance.now(); function step (newTimestamp) { scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp)); if (scrollCount >= Math.PI) window.scrollTo(0, 0); if (window.scrollY === 0) return; window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount))); oldTimestamp = newTimestamp; window.requestAnimationFrame(step); } window.requestAnimationFrame(step); } /* Explanations: - pi is the length/end point of the cosinus intervall (see above) - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire. (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) - newTimestamp - oldTimestamp equals the duration a * cos (bx + c) + d | c translates along the x axis = 0 = a * cos (bx) + d | d translates along the y axis = 1 -> only positive y values = a * cos (bx) + 1 | a stretches along the y axis = cosParameter = window.scrollY / 2 = cosParameter + cosParameter * (cos bx) | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp)) = cosParameter + cosParameter * (cos scrollCount * x) */