Jquery Scroll To Element

Have you ever wondered your website full of animations, I mean that animation on every single event on your website? well, today in this article we will see how we can scroll to an element using jquery.

What Basically Scroll to Element Is?

It means to have the functionality to scroll to the specified element of any webpage on any event, especially on click event.

This can be done with a little bit of jQuery code. Most of the time website creators want to give a direct link to the specific element of the webpage. In that case, the website owner uses a specific element ID to which he wants to give the direct link, to the anchor tag.

Normally when you click on any link on your web page with the hash anchor link you simply jump to that section of the web page.

But after adding this animated page scroll functionality to your website you will see a smooth animation while scrolling to that specific element. Hash anchor links look something like this.

<a href='#Element_ID'>Anchor Text</a>

Jquery Scroll To Element Code Snippet:

The jquery snippet for this functionality is here.

<script>
    //<![CDATA[
    // Select all links with hashes
    $('a[href*="#"]')
        // Remove links that don't actually link to anything
        .not('[href="#"]')
        .not('[href="#0"]')
        .click(function (event) {
            // On-page links
            if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
                // Figure out element to scroll to
                var target = $(this.hash);
                target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
                // Does a scroll target exist?
                if (target.length) {
                    // Only prevent default if animation is actually gonna happen
                    event.preventDefault();
                    $("html, body").animate(
                        {
                            scrollTop: target.offset().top,
                        },
                        1000,
                        function () {
                            // Callback after animation
                            // Must change focus!
                            var $target = $(target);
                            $target.focus();
                            if ($target.is(":focus")) {
                                // Checking if the target was focused
                                return false;
                            } else {
                                $target.attr("tabindex", "-1"); // Adding tabindex for elements not focusable
                                $target.focus(); // Set focus again
                            }
                        }
                    );
                }
            }
        });
    //]]>
</script>

Ok without additional discussion let me tell you how you can add this animated page scroll with hash links in blogger blog.

Steps to follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided above and add it after the tag which we have found in step 4.
6. Save Theme/Template

The code provided above prevents the default functionality of the anchor link. Using hash links you can redirect your users to the specific element on your webpage without redirecting to the new URL.

Conclusion:

This animated page scroll functionality or scroll to div also called smooth scroll will make your website look stunning.