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.
Let's begin.
- Go to Blogger dashboard.
- Navigate to Template of your chosen blog and 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>
. - Search for (Ctrl+F)
</head>
, copy (Ctrl+C) the following code and paste (Ctrl+V) it before</head>
- Click Save Template.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 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>
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.
How to use? I mean in post editor.
ReplyDeleteUpdated.
Delete