通过单击任意点上的div滚动到特定的div

Question

I know this question has been answered but the scenario of my question is quite different, so I will try to explain it. If anyone wants more explanation I would love to give it.

I have a filter bar that consists of 8 boxes.

 <div class="filter-box  filter-box--green px-2 pt-3 pb-4" data-box-id="web-dev">
     <img width="60" height="60" src="{!! asset('images/Service-page/Web Development-hover.svg') !!}" alt="Web Dev" />
         <div class="title text-center mt-2 pb-4">
                            Web<br />Development
         </div>

         <div class="arrow">
             <img src="{!! asset('images/Service-page/Green.svg') !!}">
         </div>
  </div>

When I am clicking on the box, it scrolls to the specific div based on the data-box-id

Below is the JavaScript code that scrolls to the particular div.

    <script type="text/javascript">
    $(document).ready(function() {
        $('.filter-box').on('click', function(e) {
            // console.log(window.scroll)
            var boxId = $(this).attr('data-box-id');

            $('html, body').animate({
                scrollTop: $("#" + boxId).offset().top
            }, 'slow');
        });
    })
</script>

Here I used offset . The problem is that sometimes, the cursor is not at target. What I want to achieve is that when I click anywhere on the filter box, it should scroll and my cursor position should be on the expected div.

Answer 1

Use Jquery .animate to have a smooth scroll to the desired element see the example.

 $( "#notelement" ).click(function() { $('html, body').animate({ scrollTop: ($('#element').offset().top) },500); }); 

 #notelement{ margin-bottom:800px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="notelement">Other element</div> <div id="element">Scroll to element</div>