Coder Perfect

Scroll to an element with jQuery

Category: javascript

Tag: , ,

Problem

This is the input element I have:

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

Then there are some other elements, such as text inputs, textareas, and so on.

The page should scroll to the last element of the page with a lovely animation when the user clicks on that input with #subject. It should be a bottom-to-top scroll, not a top-to-bottom scroll.

The page’s final item is a submit button that reads #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’m using the most recent version of jQuery. I prefer not to utilise a plugin and instead use the built-in jQuery functionality to accomplish this.

Asked by DiegoP.

Solution #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);
});

The code for this was taken from the post Smoothly scroll to an element without a jQuery plugin. And I put it to the test using the example below.

Answered by Steve

Solution #2

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

This small plugin was created to make scrolling pages and elements more easier. It’s adaptable, allowing you to pass in a target element or a value. What do you think about this being included in the next official release of jQuery?

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 string, integer, or element that indicates the desired scroll position.

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

duration: A text or number that specifies the duration of the animation.

easing: A string that specifies the transition’s easing function.

complete: When the animation is finished, call this function.

Answered by Timothy Perez

Solution #3

You don’t need a jQuery method if you don’t care about the smooth scroll effect and just want to scroll to a certain element. Your case is taken care of by Javascript:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

So here’s what you need to do: $ (“selector”). get(0). scrollIntoView();

Because we wish to access the JavaScript DOM element rather than the JQuery DOM element, we use.get(0).

Answered by Atharva

Solution #4

This may be done without using jQuery:

document.getElementById("element-id").scrollIntoView();

Answered by object-Object

Solution #5

Using this straightforward script

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Would make it such that if the url contains a hash tag, the scrollTo animates to the ID. If no hash tag is present, the script should be ignored.

Answered by Warface

Post is based on https://stackoverflow.com/questions/6677035/scroll-to-an-element-with-jquery