无需使用jQuery即可平滑滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在编写一个页面，其中我只想将原始JavaScript代码用于UI，而不会受到插件或框架的干扰。

现在，我正在努力寻找一种无需使用jQuery即可平滑滚动页面的方法。

回答：

尝试使用此平滑滚动演示或类似的算法：

  1. 使用获取当前的最佳位置 self.pageYOffset

  2. 获取元素的位置，直到要滚动到的位置： element.offsetTop

  3. 进行for循环到达该位置，这将非常快，或者使用计时器进行平滑滚动，直到使用 window.scrollTo

安德鲁·约翰逊的原始代码：

function currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6 - standards mode
    if (document.documentElement && document.documentElement.scrollTop)
        return document.documentElement.scrollTop;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}
function elmYPosition(eID) {
    var elm = document.getElementById(eID);
    var y = elm.offsetTop;
    var node = elm;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}
function smoothScroll(eID) {
    var startY = currentYPosition();
    var stopY = elmYPosition(eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    if (speed >= 20) speed = 20;
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
}

以上是 无需使用jQuery即可平滑滚动 的全部内容， 来源链接： utcz.com/qa/410453.html

回到顶部