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, leave it 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 of, 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 in 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 further 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 premium. It's time to make new customers on you visitors of your website for that you should add some advanced functionalities in your websites.

I am here to break the limitations of blogger CMS and make your blogger blogs look premium.