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.

Before you make any changes, it's recommended to backup your blog template to avoid template crush if anything goes wrong.

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.

4Tech Blogger

Smooth Scrolling To Internal Links.

Post a Comment

Get Free Payoneer Masercard With $ 25 bonus ( Sing up Now)

Responsive Share Buttons with Counter For Blogger.

Download Counter Plugin For Blogger

Music Player Responsive For Blogger.

Amaizing Css Animation Loading Screen Ball For Blogger.