按钮单击滚动到下一个div

Question

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

Answer 1

我会通过给每个<div>一个ID来做到这一点，并使得右下方的<div>包含一个<a>，默认href为href='#<firstdiv>'。从那里，您可以将每个<div> ID放在一个数组中，然后单击它们。所以你的右下角看起来像这样

<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;
    }
}

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