我正在寻找一个简单的,跨浏览器“滚动到顶部”的动画,我可以应用到一个链接。我不想需要一个JS库,如jQuery/Moo等。
// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);
对于那些在跳进图书馆之前应该100%学习JS的人来说,我是一个完美的例子。:(
我正在寻找一个简单的,跨浏览器“滚动到顶部”的动画,我可以应用到一个链接。我不想需要一个JS库,如jQuery/Moo等。
// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);
对于那些在跳进图书馆之前应该100%学习JS的人来说,我是一个完美的例子。:(
当前回答
我修改了TimWolla的答案,使用二次输入-输出缓和(更流畅一点:)。下面是一个正在运行的示例:在jsFiddle上。这里提供了缓动函数:Robert Penner的缓动函数
document.getElementsByTagName('button')[0].onclick = function () {
scrollTo(document.body, 0, 1250);
}
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
increment = 20;
var animateScroll = function(elapsedTime) {
elapsedTime += increment;
var position = easeInOut(elapsedTime, start, change, duration);
element.scrollTop = position;
if (elapsedTime < duration) {
setTimeout(function() {
animateScroll(elapsedTime);
}, increment);
}
};
animateScroll(0);
}
function easeInOut(currentTime, start, change, duration) {
currentTime /= duration / 2;
if (currentTime < 1) {
return change / 2 * currentTime * currentTime + start;
}
currentTime -= 1;
return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}
其他回答
JS解决方案w/o jQuery。
element.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' })
实际上有一个纯javascript的方式来完成这个不使用setTimeout或requestAnimationFrame或jQuery。
简而言之,在scrollView中找到要滚动到的元素,并使用scrollIntoView
el.scrollIntoView({行为:“平滑”});
这是一个普朗克。
一件容易的事。
var scrollIt = function(time) {
// time = scroll time in ms
var start = new Date().getTime(),
scroll = document.documentElement.scrollTop + document.body.scrollTop,
timer = setInterval(function() {
var now = Math.min(time,(new Date().getTime())-start)/time;
document.documentElement.scrollTop
= document.body.scrollTop = (1-time)/start*scroll;
if( now == 1) clearTimeout(timer);
},25);
}
没有人提到CSS属性滚动行为
CSS
html {
scroll-behavior: smooth;
}
JS
window.scrollTo(0,0)
改编自下面的回答:
function scroll(y, duration) {
var initialY = document.documentElement.scrollTop || document.body.scrollTop;
var baseY = (initialY + y) * 0.5;
var difference = initialY - baseY;
var startTime = performance.now();
function step() {
var normalizedTime = (performance.now() - startTime) / duration;
if (normalizedTime > 1) normalizedTime = 1;
window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
if (normalizedTime < 1) window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
这应该允许你平滑地滚动(余弦函数)从任何地方到指定的“y”。