Question

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

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

的类

Page Nav btn

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

自动滚动btn

        <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');

我添加了一个＆＃34; data-btn＆＃34;属性到所有部分并给它们一个从1 - 5

的值

然后在＆＃34;数据位置＆＃34;下添加此行。在我的绑定函数上行。

似乎工作。感谢任何试过这个的人。我不知道这是不是很好的做法，但我没有收到错误，而且有效！

Answer 2

试试这个：

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

   lastScroll = document.documentElement.scrollTop; 
}

JS如何更改页面滚动的var？

2 个答案: