Navigation Menu

Scroll to an Internal Link

Scroll to Top and Bottom

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, it's recommended to backup your blog template to avoid template crush if anything goes wrong.

Let's begin.
  1. Go to 'Blogger' dashboard.
  2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list.
  3. Click 'Edit HTML'.
  4. Skip this step if jQuery library already included in your blog template. Otherwise search for (Ctrl+F) <head> and paste (Ctrl+V) the following line just after <head>.
  5. <script type="text/javascript" src=""></script>
  6. Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it before </head>
    <script type='text/javascript'>
    $(function() {
     $('a[href^="#"]').click(function(e) {
      $('html,body').animate({ scrollTop: $(this.hash).offset().top}, 900);
      return false;
  8. Click 'Save Template'. Enjoy !
If you have any questions on this, please let me know. Happy blogging.

Related Stories

Share Your Thoughts

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.

  • Blogger 1
  • Disqus

1 comment