Scroll to an Internal Link

Scrolling within page i.e. scroll to an internal link has experienced a huge growth in popularity in web design in recent years. Perhaps you’ve seen it before that when you click a link in the navigation, it takes you not to another page but a specific point within the current page. Actually it is very easy to do with some extremely basic HTML but if you want a nice scrolling animation when page goes up or bottom, you have to add some jQuey along with the HTML. This tutorial is about how to scroll to an internal link. I wish this simple and little trick works for you.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.

Before we begin you can try the Demo to understand what is this exactly.

Let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon.
   
3. Click 'Template' from Drop-down menu list.
4. Click 'Edit HTML'.
   
5. Make sure that 'Expand Widget Templates' is checked.
6. Search for (Ctrl+F) </head>
7. Paste these codes before </head>

   
   
   <script type='text/javascript'>
   $(document).ready(function(){
    $('a[href^="#"]').click(function() {
     $('html,body').animate({ scrollTop: $(this.hash).offset().top}, 900);
     return false;
     e.preventDefault();
    });
   });
   </script>
   

I've tried my best to keep things as simple as possible. If you have any questions on this, please let me know. Happy blogging.