JS如何在页面滚动上更改var？

Question

我向我的页面添加了一个自动滚动功能，该功能使用下面的代码来索引我的导航按钮。

注意：所有部分都是 100vh 并包含一个名为 .hash 的类

页面导航按钮

<a href="#about" data-target="btn2" title="">About</a>

自动滚动按钮

        <div id="autoScroller">
            <div id="up" onclick="section--; currentSection();"></div>
            <div id="down" onclick="section++; currentSection();"></div>
        </div>

JS

var maximumSections = $('.hash').length;
var section = 1;
function currentSection(){
if (section > maximumSections){
    section = 1
} else if (section < 1){
    section = maximumSections
}
    $("a[data-target='btn"+ section +"']").click();
}

当滚动到新部分时，我还使用此位自动调整我的网址

$(document).bind('scroll',function(e){
$('.hash').each(function(){
    if (
       $(this).offset().top < window.pageYOffset + 20
    && $(this).offset().top + $(this).height() > window.pageYOffset + 20
    ) {
        window.location.hash = $(this).attr('data-location');
    }
});
});

我的下一步就是卡住了。 目前，如果您手动滚动到页面底部，然后单击向下自动滚动按钮，它会滚动到第 2 部分，因为 var 部分尚未从 var section = 1 的初始状态更新。

Answer 1

嘿，我想通了！

        window.section = $(this).attr('data-btn');

我为所有部分添加了一个“data-btn”属性，并给了它们一个 1 - 5 的值

然后在我的绑定函数的“数据位置”行下添加了这一行。

似乎有效。感谢任何尝试过这个的人。我不知道这是否是一种好的做法，但我没有收到错误并且它有效！

Answer 2

试试这个：

window.onscroll = function() {adjustSection()};
var lastScroll = 0;
function adjustSection() {     
    if (document.body.scrollTop > lastScroll ) 
       section++;
     else 
       section--;   

   lastScroll = document.documentElement.scrollTop; 
}