Question

是否可以在函数中使用任何替代方法将浏览器滚动到页面顶部？现在我正在使用：$('html, body').animate({scrollTop: '0px'}, 300);。

是否有其他东西，或者不是jQuery的东西？

Answer 1

下面是scrollTop函数的纯JavaScript实现。它使用setInterval作为异步while循环，周期性地递减pageYOffset值，该值表示相对于页面顶部的滚动条位置。

为了澄清，while循环会阻止页面上的其他脚本运行，并且无论步骤值如何，都会使滚动到顶部显示为即时。然而，具有50ms迭代的setInterval将仅每50ms阻止一次页面，并且将在每次单独迭代之后更新滚动条UI。

该函数采用单个参数“step”，它确定滚动条移动到屏幕顶部的速率。步长越小，滚动条移动到顶部的速度越慢。

function scrollTop(step) {
    var start = window.pageYOffset;
    var count = 0;
    var intervalRef = setInterval( (function(interval, curOffset) {
        return function() {
            curOffset -= (interval * step);
            console.info("offset = " + curOffset);
            window.scrollTo(0, curOffset);
            console.info("pageYoffset = " + window.pageYOffset);
            count++;
            if(count > 150 || curOffset < 0) clearInterval(intervalRef);
        }
    })(step, start--), 50);
}

// scroll to the top from the middle of the page in about 5 seconds.
scrollTop(5);

// scroll to the top in about 1 second
scrollTop(15);

// scrolls to the top very fast!
scrollTop(35);

当偏移量达到0时间隔停止，这意味着滚动条已到达页面顶部。

但是，计数检查器会将操作限制为仅150次迭代，以防止您锁定浏览器，以防您决定修改它。否则，您可以删除该条件。

Answer 2

Hiya 工作演示 http://jsfiddle.net/jqj9T/5/ 或 http://jsfiddle.net/jqj9T/5/show/

这是你在找什么，在IE-8中检查过，这个版本有效。

http://api.jquery.com/animate/

http://api.jquery.com/scrollTop/

希望这有帮助，

请注意我已经开始使用150来演示/展示它是如何工作的，你可以将它改为0。

使用slow的另一个版本：http://jsfiddle.net/jqj9T/7/

Jquery代码

if( $('html,body').scrollTop() != 150 ){
    $('html,body').animate({scrollTop: $(window).scrollTop() + 150}, 300);
}

有没有jQuery scrollTop的替代品？

2 个答案: