: 2:23 AM ,
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.

Smooth Scrolling To Internal Links


This tutorial is about how to scroll to an internal link. I wish this simple and little trick works for you.

[warning title="Warning message" icon="exclamation-triangle"] Before you make any changes, it's recommended to backup your blog template to avoid template crush if anything goes wrong.[/warning]
Demo Here



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>
  5. Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it before </head>
    6. 
<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>

  6. Now Save template

Customization 
<ul id="t_o_p">
 <li><a href="#p_1">Paragraph #1</a></li> 
 <li><a href="#p_2">Paragraph #2</a></li> 
 <li><a href="#p_3">Paragraph #3</a></li>
 <li><a href="#p_4">Paragraph #4</a></li>
 <li><a href="#p_5">Paragraph #5</a></li>
</ul>
<h1 id="p_1">Paragraph #1</h1>
<p>Text here</p>
<p><a href="#t_o_p">Back to navigation</a></p>
<h1 id="p_2">Paragraph #2</h1>
<p>Text here</p>
<p><a href="#t_o_p">Back to navigation</a></p>
<h1 id="p_3">Paragraph #3</h1>
<p>Text here</p>
<p><a href="#t_o_p">Back to navigation</a></p>
<h1 id="p_4">Paragraph #4</h1>
<p>Text here</p>
<p><a href="#t_o_p">Back to navigation</a></p>
<h1 id="p_5">Paragraph #5</h1>
<p>Text here</p>
<p><a href="#t_o_p">Back to navigation</a></p>

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