scroll to next div by js

Question

I know there are lots of same examples, but their code don't work. Please Help. So I have arrow Image at the bottom of container block? The content of container are flex( if it is important to know,.) And when i click on arrow, it should move down by next container.

 $("#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/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.

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

If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/

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

Answer 2

You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.

 .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>