单击按钮滚动到下一个 div

Question

我正在构建一个右下角有一个 div 的网站。无论您向上或向下滚动多远，这始终是可见的和浮动的。一旦你点击它，它应该向下滚动到下一个 div。该网站是一个长滚动页面网站。有 5 个 div 相互堆叠。我怎样才能做到这一点？我正在使用 JQuery 和 scrollTop 来尝试实现这一点，但它不起作用。提前致谢。

Answer 1

我会通过给每个<div> 一个ID 来解决这个问题，并使右下角的<div> 包含一个<a>，默认href 为href='#<firstdiv>'。从那里，您可以将每个<div> ID 放入一个数组中，然后单击循环浏览它们。所以你的右下 div 看起来像这样

<div><a onclick="cycle(this);" href="#first_div"></a></div>

您要跳转到的个人<div>s 看起来像这样

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

你的 JS 就是这个

$( document ).ready(function() {
    var divs = ["first", "second", "third"];
    var counter = 0;
});

function cycle(element) {
    $(element).attr("href", divs[counter]);
    if(counter < divs.length - 1) {
        counter++;
    }
    else {
        counter = 0;
    }
}

虽然不是解决问题的最模块化的方法，但这应该提供一个相当简单的解决方案。