跨浏览器JavaScript(不是jQuery…)滚动到顶部动画

我正在寻找一个简单的，跨浏览器“滚动到顶部”的动画，我可以应用到一个链接。我不想需要一个JS库，如jQuery/Moo等。

// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);

对于那些在跳进图书馆之前应该100%学习JS的人来说，我是一个完美的例子。：(

当前回答

平滑滚动现在在所有现代浏览器中都是默认实现的。您还可以对其进行填充，以获得旧浏览器的支持。

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position for any element
document.querySelector('.scrollable-element').scrollBy({
  top: 100, 
  behavior: 'smooth'
});

// Scroll to top
var element = document.querySelector('.scrollable-element');
element.scrollBy({
  top: -element.scrollTop, 
  behavior: 'smooth'
});

来源:https://css-tricks.com/snippets/jquery/smooth-scrolling/

2022-11-22 14:02:46

其他回答

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

演示:

2012-01-18 21:57:05

我修改了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;
}

2013-04-21 22:17:53

没有人提到CSS属性滚动行为

CSS

html {
  scroll-behavior: smooth;
}

window.scrollTo(0,0)

2019-04-15 13:15:48

没有JQuery代码，希望这将帮助你。

function TopscrollTo() {
if(window.scrollY!=0)
{
    setTimeout(function() {
       window.scrollTo(0,window.scrollY-30);
        TopscrollTo();
    }, 100);
   }
}

在按钮单击事件或任何其他你想要的元素/事件上调用这个TopscrollTo()函数。

2014-03-24 13:17:47

我已经选择了@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;
}

2017-08-15 12:46:18

跨浏览器JavaScript(不是jQuery…)滚动到顶部动画

推荐文章

最新文章

标签