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

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. Click 'Save Template'. Enjoy !
If you have any questions on this, please let me know. Happy blogging.

Comments

Post a Comment

Popular posts from this blog

Blogger Navigation with Post Title

-
Image
In my blog I've discussed how to customize blogger newer-post and older-post navigation. Today I'll show you how to display post titles with these navigation links. It actually looks good to display blog post titles instead of showing just page navigation buttons.The basic concept behind this trick is simple. We'll use jQuery .get() function to display titles with these links. jQuery introduced this function to load data from the server using a HTTP GET request. Since blogger does not have proper data tag that can load title of previous page or next page, we'll use this jQuery function to load data from the server. I'ill also show you some stylish appearance of post titles with these navigations. However if you know a little bit of css, you can easily customize your blogger appearance. Before you make any changes in your blogger template, it is recommended to backup your blog if anything goes wrong. Moreover do it at your own risk. Bloganalyzer is not responsi...
Read more

Auto Read More for Blogger

-
Image
Insert a read-more link within blog post not only makes things organized and well managed but also loads your blog faster. Your blog readers can go through different posts at a glance, while they are actually browsing start-up page. Moreover it optimizes your blog to be found over search engine very easily. Although it may be (little) irritating to insert jump break or read more link for each post individually. Sometimes it may happen that you accidently forget to insert jump break link. In that case your entire post will be displayed in your home page, which is a bit of annoying. That why bloggers often go for auto read more link generator. This tutorial is about how to insert read more link, both manually and automatically, with an added bonus of how to customize it and replace it with an image. So, stay tuned. Before you attempt to make any changes, it is recommended to backup your blogger template. Bloganalyzer is not responsible for any type losses, if occurs. Ready ? l...
Read more

Reaction Buttons for Blogger

-
Image
Reaction buttons helps the readers of your blog to react to your blog posts. With help of this feature, you can get feedback from your readers. This is very interesting as well as very helpful for those readers of your blog who don't have enough to say about your blog posts. More or less, reaction buttons are something like polls for every blog posts. Fortunately Blogger has already included this feature for us. So this tutorial will show you how to implement that widget in your blog. Besides I've found that blogger has limited number of reaction buttons. So, in addition I'll show you how to add infinite number of buttons in your blog. To enable Reaction buttons log in to your blogger account and go to 'Layout' section. Click 'Edit' link on the 'Blog Posts' gadget. A new window will appear where you'll find many options including 'Reactions'. Check the box in order to enable reactions for your blogger. By default blogger pro...
Read more