Smooth Scrolling To Internal Links.

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.

[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.

Go to 'Blogger' Dashboard.
Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list.
Click 'Edit HTML'.
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>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it before </head>


<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>

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.

Labels

Layout

Post Style

Technology

Breaking News

Smooth Scrolling To Internal Links.

Customization

Post a Comment

Layout

Boxed Background Image

Main Color

Shawon Khan

Contact Form