Scroll to an Internal Link

6/24/2015
1 comments
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="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  6. Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it before </head>
  7. 
    <script type='text/javascript'>
      //<![CDATA[
    $(function() {
     $('a[href^="#"]').click(function(e) {
      $('html,body').animate({ scrollTop: $(this.hash).offset().top}, 900);
      return false;
      e.preventDefault();
     });
    });
    //]]>
    </script>
  8. Click 'Save Template'. Enjoy !
If you have any questions on this, please let me know. Happy blogging.
Join the Conversation

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.

Comments so far on 'Scroll to an Internal Link'

  • 1 comment on Blogger
  • on Disqus

Thanks for your feedback. We shall get back to you soon.
Happy Blogging.

© 2016 Bloganalyzer. All rights Reserved. Designed By meNight Fury. DMCA.com Protection Status