Skip to main content

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. Navigate to Template of your chosen blog and click Edit HTML.
  3. 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>.
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  5. Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it before </head>
  6. <!-- Scrolling within page -->
    <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>
  7. Click Save Template.

To use internal scrolling inside your post, define your article an unique ID, and refer to that ID using an anchor tag. For instance,

<a href="#para">Paragraph</a>
...
...
...
...
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

If you have any questions on this, please let me know.
Happy blogging.

Comments

Post a Comment

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.