通過js滾動到下一個div

Question

我知道有很多相同的例子，但他們的代碼不起作用。 請幫忙。 所以我在容器塊的底部有箭頭圖像？ 容器的內容是彈性的（如果知道重要的話，。）當我點擊箭頭時，它應該向下移動到下一個容器。

 $("#arrow").click(function() { var $target = $('.container.active').next('.container'); if ($target.length == 0) $target = $('.container:first'); $('html, body').animate({ scrollTop: $target.offset().top }, 'slow'); $('.active').removeClass('active'); $target.addClass('active'); });

 .container { height: 100%; margin: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container first active" id="first"> ///not important content <button class="next"> <img src="arrow.png" id="arrow" alt="down">click </button> </div> <div class="container second" id="second"> <div class="arrow"> <img src="arrowup.png" alt="up"> </div> <div class="arrow"> <img src="arrow.png" alt="arrow"> </div> </div>

Answer 1

https://jsfiddle.net/w7duthsa/試試這個。 你應該小心箭頭事件觸發的地方。 它在圖標中。 你必須點擊圖標才能運行。 按鈕不下來。

$("#arrow").on("click", function(e) {
    $(document).scrollTop($(this).parent().parent().next().offset().top);
    return false; // prevent anchor
});

如果你想放棄按鈕，然后給按鈕箭頭 id 並使用 https ://jsfiddle.net/w7duthsa/1/ 下面的 function

 $("#arrow").on("click", function(e) {
        $(document).scrollTop($(this).parent().next().offset().top);
        return false; // prevent anchor
    });

Answer 2

您可以簡單地使用錨標記並傳遞您想要關注的 div 的 id。 下面是一個例子。

 .container { height: 100%; margin: 0px; }.second, .first{ border: 1px solid black; height: 500px; width:100% }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container first active" id="first"> <.-- not important content --> <a href="#second"> <img src="arrow.png" id="arrow" alt="down">click </a> </div> <div class="container second" id="second"> <a class="arrow" href="#first"> <img src="arrowup.png" alt="up"> </a> <div class="arrow"> <img src="arrow.png" alt="arrow"> </div> </div>