单击按钮滚动到下一个 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>

您要跳转到的 dividual <div> 看起来像这样

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

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

单击按钮滚动到下一个 div

scroll to the next div on button click

html

jquery

scrolltop