How To Use jQuery To Scroll To A Specific Element

How To Use jQuery To Scroll To A Specific Element

With jQuery you can create excellent ways to increase the interaction with the users. One such way is by creating jQuery Scroll to Element feature. With this feature you can create internal links on your web page, when a person clicks on any such link he is scrolled to the specific element.

This is very handy specially when the web page is quite large and with these internal links users are taken directly to the specific topics on the page.

jQuery Scroll To Element Demo

I have created this feature in my SEO Terms tutorial. You can check it by clicking on any of the below 3 links. Once you click on them you will scrolled to the respective topic once the page is loaded.

jQuery Scroll to Element Code

We specify the internal links by starting them with “#”. These links are put in the “href” attribute of the anchor. This is how they look:

<a href="#targetDiv">Scroll to Target</a>
<div id="targetDiv">
</div>

In the above jQuery Scroll to Element Code it is quite clear that on clicking the “Scroll to Target” link the user will be scrolled to the “targetDiv”.

Now create the jQuery scroll features for the click event on anchor tags. The click event is applied to only those anchor tags whose href attribute starts with “#”. The below jQuery code does this work:

$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();

    var targetEle = this.hash;
    var $targetEle = $(targetEle);

    $('html, body').stop().animate({
        'scrollTop': $targetEle.offset().top
    }, 800, 'swing', function () {
        window.location.hash = targetEle;
    });
});

That’s all for the coding part and you will see jQuery will do the Smooth Scroll to the target element when an internal link is clicked.

Demo and Download links are given below:

DEMO DOWNLOAD

You can also give the URL of internal links on different pages so that the user is automatically scrolled to the targeted element on the page load itself.

Changing jQuery Smooth Scroll to Fast Scroll

In the above jQuery scroll to element code you will see that I have given 800 to the animate function (“$(‘html, body’).stop().animate()”). This 800 is the time in milliseconds for the scroll to complete. If you change it to a smaller value like 100 then the jQuery Smooth Scroll will change to a Fast Scroll.

$('html, body').stop().animate({
    'scrollTop': $targetEle.offset().top
}, 100, 'swing', function () {
    window.location.hash = targetEle;
});
Removing the internal link (#) from URL.

You will see on clicking the internal link, it gets added in the URL of the web page. If you don’t want this then remove the last parameter (function ()) from the animate function. The updated code will look like:

$('html, body').stop().animate({
    'scrollTop': $targetEle.offset().top
}, 100, 'swing');

jQuery Scroll To Top

When the web page has huge amount of content then you should provide a button (or image or link) at the bottom so that users can go to the top of the page by clicking it. This feature can be created in jQuery by just a single line of code.

The jQuery Scroll To Top code is given below:

<a id="top">Scroll To Top</a>

Clicking the above anchor will scroll user to the top.

$('#top').click(function () {
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.

Enter your email address

Subscribe to this blog and receive notifications of new posts by email. Join over 81,000 other subscribers

Don't worry we won't spam.

subscribers