javascript - $(window).scrollTop() 的说法正确吗？

Question

我正在尝试构建一个像这样的函数:

var t =$('#top');
var q1=$('#fe1');
var q2=$('#fe2');
var q3=$('#fe3');
var q4=$('#fe4');
var q5=$('#fe5');
var win = $(window);
var doc=$(document);
var wins = win.scrollTop();
var docs = doc.scrollTop();


function next (){
    if (wins == docs) {
        q1.ScrollTo();
    }
    else if (wins == q1.scrollTop()) {
        q2.ScrollTo();
    }
    else if (wins == q2.scrollTop()) {
            q3.ScrollTo();
    }
    else if (wins == q3.scrollTop()) {
        q4.ScrollTo();
    }
    else if (wins == q4.scrollTop()) {
        q5.ScrollTo();
    }
}

我想滚动到下一部分。为此，代码会检查我所在的部分，以便它知道要滚动到哪个部分。但我认为 $(window).scrollTop() 不是我想要的。

我想要一个返回页面顶部和我所显示内容顶部之间距离的语句。也许我必须做更复杂的操作。你知道我怎样才能得到这个吗？

谢谢。

Answer 1

即使没有 jQuery 或类似的纯 JavaScript，这个问题也很容易解决。这是您的示例:

var next = (function (sections) {

    function getTop(node) {
        return node ? node.offsetTop + getTop(node.offsetParent) : 0;
    }

    return function () {
        var i, nodeTop, top = window.pageYOffset;

        for (i = 0; i < sections.length; i += 1) {
            nodeTop = getTop(document.getElementById(sections[i]));
            if (nodeTop > top) {
                window.scrollTo(window.pageXOffset, nodeTop);
                return;
            }
        }
    };
}(['top', 'fe1', 'fe2', 'fe3', 'fe4', 'fe5']));

代码非常通用，因此您可以传递您想要的任何部分 ID(它们只需要以正确的顺序出现)。

我们在这里使用两个标准 DOM 属性/函数 window.pageYOffset 和 window.scrollTo() 来获取和设置窗口的垂直偏移量 (window.pageYOffset) 和 window.scrollTo() 。 pageXOffset 用于保持水平偏移相同)。为了获取部分开始的垂直偏移，我使用简单的递归定义了 getTop 函数(恕我直言，jQuery 使用类似的代码)。

结果函数 next() 在自调用闭包中定义，以隐藏实现和辅助函数。要在运行此代码后使用它，您只需调用

next();

我测试了这段代码，所以我非常有信心它可以工作:)。