javascript jquery scroll

Scroll to an element with jQuery


I have this input element:

  <input type="text" class="textfield" value="" id="subject" name="subject">

Then I have some other elements, like other tag’s & <textarea> tag’s, etc…

When the user clicks on the <input id="#subject">, the page should scroll to the page’s last element, and it should do so with a nice animation (It should be a scroll to bottom and not to top).

The last item of the page is a submit button with #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

The animation should not be too fast and should be fluid.

I am running the latest jQuery version. I prefer to not install any plugin but to use the default jQuery features to achieve this.



Assuming you have a button with the id button, try this example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

    <script src=""></script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
    <div id="div1" style="height: 1000px; width 100px">
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    <button id="click">Click me</button>



jQuery .scrollTo(): View – Demo, API, Source

I wrote this lightweight plugin to make page/element scrolling much easier. It’s flexible where you could pass in a target element or specified value. Perhaps this could be part of jQuery’s next official release, what do you think?

Examples Usage:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down


scrollTarget: A element, string, or number which indicates desired scroll position.

offsetTop: A number that defines additional spacing above scroll target.

duration: A string or number determining how long the animation will run.

easing: A string indicating which easing function to use for the transition.

complete: A function to call once the animation is complete.



If you are not much interested in the smooth scroll effect and just interested in scrolling to a particular element, you don’t require some jQuery function for this. Javascript has got your case covered:

So all you need to do is: $("selector").get(0).scrollIntoView();

.get(0) is used because we want to retrieve the JavaScript’s DOM element and not the JQuery’s DOM element.


  • 16

    Could you also use $(selector)[0]?

    – RobW

    Mar 17, 2014 at 19:02

  • 19

    RobW, yes you can just use [0], but get(0) protects you against undefined or negative indexes. See the source:

    – corbacho

    Apr 2, 2014 at 14:16

  • 25

    If you don’t want to use jQuery at all, just use document.getElementById('#elementID').scrollIntoView(). No use loading a ~100k library just to select an element and then convert it to regular JavaScript.

    – Gavin

    Jun 23, 2014 at 18:59

  • 76

    @Gavin I’m sure you meant that to be: document.getElementById('elementID').scrollIntoView()

    – Brian

    Sep 18, 2014 at 21:40

  • Would be nice to be able to define an offset …

    – Avatar

    May 26 at 15:28