我正在寻找一个简单的,跨浏览器“滚动到顶部”的动画,我可以应用到一个链接。我不想需要一个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的人来说,我是一个完美的例子。:(
当前回答
一件容易的事。
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);
}
其他回答
我修改了@TimWolla的代码,添加了更多的选项和一些移动功能。 另外,增加了对document.body.scrollTop和document.documentElement.scrollTop的跨浏览器支持
// scroll to top
scrollTo(0, 1000);
// Element to move, time in ms to animate
function scrollTo(element, duration) {
var e = document.documentElement;
if(e.scrollTop===0){
var t = e.scrollTop;
++e.scrollTop;
e = t+1===e.scrollTop--?e:document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if(typeof from === "object")from=from.offsetTop;
if(typeof to === "object")to=to.offsetTop;
scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed<= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
http://jsfiddle.net/forestrf/tPQSv/
简化版: http://jsfiddle.net/forestrf/tPQSv/139/
// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
我已经选择了@timwolla answer的@akai版本,并添加了stopAnimation函数作为返回,所以在开始新的动画之前,旧的动画可以停止。
if ( this.stopAnimation )
this.stopAnimation()
this.stopAnimation = scrollTo( el, scrollDestination, 300 )
// definitions
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
increment = 20,
timeOut;
var animateScroll = function(elapsedTime) {
elapsedTime += increment;
var position = easeInOut(elapsedTime, start, change, duration);
element.scrollTop = position;
if (elapsedTime < duration) {
timeOut = setTimeout(function() {
animateScroll(elapsedTime);
}, increment);
}
};
animateScroll(0);
return stopAnimation
function stopAnimation() {
clearTimeout( timeOut )
}
}
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' })
没有JQuery代码,希望这将帮助你。
function TopscrollTo() {
if(window.scrollY!=0)
{
setTimeout(function() {
window.scrollTo(0,window.scrollY-30);
TopscrollTo();
}, 100);
}
}
在按钮单击事件或任何其他你想要的元素/事件上调用这个TopscrollTo()函数。
实际上有一个纯javascript的方式来完成这个不使用setTimeout或requestAnimationFrame或jQuery。
简而言之,在scrollView中找到要滚动到的元素,并使用scrollIntoView
el.scrollIntoView({行为:“平滑”});
这是一个普朗克。