Scroll to an element with jQuery

Question

I have this input element:

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

Then I have some other elements, like other text inputs, textareas, etc.

When the user clicks on that input with #subject, the page should scroll to the last element of the page 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.

Answer 1

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.

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

Answer 2

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

Options:

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.

Scroll to an element with jQuery

aleenlemke41

Correct Answer

ozella_sawayn

Other Answer

hillard_boyer

Statistics

Related Questions

How do I check if an element is hidden in jQuery?

How can I upload files asynchronously with jQuery?

Setting "checked" for a checkbox with jQuery

How can I select an element with multiple classes in jQuery?

How do I check whether a checkbox is checked in jQuery?

Scroll to the top of the page using JavaScript?

Disable/enable an input with jQuery?

How can I refresh a page with jQuery?

Daily Trending Questions

How to extract only variables from python code expression without any function name

Python: How do I check if login and password int exist in a txt file?

Why does this line produce a nullpointer? Java 15

how to make mysql columns value depend on other columns

Python Scripting not sure whats wrong in my script and why it is not running

Why are warmup forks useful in JMH?

Python dictionary: How to assign a default value to every Null entry found

Extract data from .txt file

Why isn't a function parameter used here?

Average of dataframes values in a list by name

Trending Questions

Creating a byte array from a stream

How can I match "anything up until this sequence of characters" in a regular expression?

Remove blue border from css custom-styled button in Chrome

How to change to an older version of Node.js

How do I call one constructor from another in Java?

PostgreSQL error: Fatal: role "username" does not exist

Best way to strip punctuation from a string

'password authentication failed for user "postgres"'

Launch Bootstrap Modal on Page Load

How can I read inputs as numbers?

Trending Tags

Scroll to an element with jQuery

Share a link to this question

Correct Answer

Share a link to this question

Other Answer

Share a link to this question

Statistics

Related Questions

Daily Trending Questions

Trending Questions

Trending Tags