How to scroll on click of a button to a certain element/div on the bottom of the page with jQuery?

Question

I have tried different variations of this and it still does not work for me. I am trying to add an animation so that when I click in the button, it scrolls down to the certain element on the page.

Here's my code:

   <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script> 

<!-- jQuery code to show the working of this method -->
<script> 
   $(document).ready(function() { 
        $("#nav-projects").click(function() { 
            $("html, body").animate({ 
                scrollTop: $( 
                  'html, body').get(0).scrollHeight 
            }, 2000); 
        }); 
    });
</script>

Does this answer your question? [jQuery scroll to element](https://stackoverflow.com/questions/6677035/jquery-scroll-to-element) — Pranav Rustagi, Oct 12 '20 at 06:24

score 0 · Accepted Answer · answered Oct 12 '20 at 23:01

0

An alternative way with CSS without jQuery ($('#yourelement').offset().top;) or Javascript would be:

html {
  scroll-behavior: smooth;
}

<a href="#A">Goto A</a>
<a href="#B">Goto B</a>
<a href="#C">Goto C</a>

<hr>

<div id="A" style="height:500px;">Section A</div>
<div id="B" style="height:500px;">Section B</div>
<div id="C" style="height:500px;">Section C</div>

answered Oct 12 '20 at 23:01

dipser

442
3
5

This worked exactly how I wanted to! Amazing! Thanks a lot! – Alyona Oct 14 '20 at 03:48

score 0 · Answer 2 · answered Oct 12 '20 at 23:13

Try this:

<script> 
  $(document).ready(function() { 
    $("#nav-projects").click(function() { 
        $("html, body").animate({ 
            scrollTop: $( 
              #id).height() 
        }, 2000); 
    }); 
   });
 </script>

Replace id with the id of the element to which you wish to scroll to and adjust the height accordingly.

How to scroll on click of a button to a certain element/div on the bottom of the page with jQuery?

2 Answers2