Question

我目前正在一个网站上工作，该网站只包含1页但彼此之间有6个div。每个div的大小都是屏幕填充。我已经有一个滚动到每个div顶部的脚本，具体取决于您在navi中单击的链接。

我现在遇到的问题是我想写一个脚本，如果你只是向上/向下滚动就可以自动滚动到上一个/下一个div。例如：我在着陆屏幕上，只看到第一个div。如果我现在向下滚动，我希望页面自动滚动到第二个（下一个）div。动画完成后我进一步滚动，脚本应自动滚动到第三个div，依此类推。

到目前为止，这是我的代码

var position0 = 0;
var IdArray = ["landingpage", "news", "show", "media", "blog", "contact"]; // divs' ids
var milestones = new Array();

window.onload = function GetPositions() {
    position0 = $(window).scrollTop();
    //getting the current position of the window
    for (var i = 0; i < IdArray.length; i++) {
        var genId = IdArray[i];
        var getHeight = document.getElementById(genId).offsetTop;
        milestones.push(getHeight)
        //filling the milestones array with the positions needed
    };
};


window.onscroll = scroll;

var direction = ""; //calculated in the function below

function scroll() {
    var position1 = $(window).scrollTop();
    // getting the new position of the window
    var direction = position1 - position0;
    // calculating the direction to seperate up and down scrolling

    // the following part is most likely the wrong one

    for (var i = 0; i < milestones.length; i++) {
        var x = milestones[i];
        if (direction > 0 && x > position1) {
            direction = 0;
            $('html,body').animate({
                scrollTop: x
            }, 750);
            return false;
            break;
        };
    };
};

我知道在javascript中混合了一些jquery，但是命令工作得很好。

如果我执行代码，它会工作一次，但我不能滚动几秒钟，这很可能是因为.onscroll事件不止一次触发。此外，我不确定动画滚动是否也会触发滚动事件：/

随意更改代码

我希望有人可以帮助我

滚动到页面上的里程碑

0 个答案: