Smooth Scrolling To Anchor Links On Page With Blogger

I hope you would have also realized the relevance of integrating links while writing lengthy blogs. Because links integrated in blog facilitates the readers to instantly move on the significant section of the page. Let us for instance talk about the most commonly used link integrated in blog (s) i.e., “Comments” clicking on which enables the reader to quickly move on the comment section of blog to post their comments regarding that blog. In simple terms it can be said that links facilitates the readers to have an instant look on those section which they have skipped while reading the article.

In this tutorial we shall be discussing the process of integrating smooth scrolling feature into section link in Blogger. For this move to Template widget in your Blog Dashboard and click on Edit HTML option and look for closing </body> tag, and paste the code mentioned below just above it:



Now save the changes made by you.

Now as soon as you click on link which is related with different parts of your blog (as mentioned above in the first paragraph i.e., comment section of your blog, will directly link you to comment section of your blog) without making rapid shift on the concerned section.

Note1:  If you have referred jQuery somewhere else in template you should ignore the jQuery which is displayed at the top of this code; 

Note 2:  The above mentioned code is applicable only on new Blogger Template. However if you are working on older version of Blogger you will have to look for <div> class or ID which includes whole site and replace the portion of text with relevant class/ID rather than .content as mentioned in above code.

Integrating your own links to scroll to sections of your site. If you are interested in integrating links in a blog post (or somewhere else in template) facilitating readers to move on sections of your site, you should keep following points in concern:

  • Integrate an ID to the section on the page on which you want to insert scroll feature in the HTML of your post/template. For instance you can integrate <a id=”this section”/> on that particular section of your blog;

  • Add an internal page link in which the URL format is #id-of-section-to-scroll to. Taking the example discussed above you can insert the following code: <a href="#thisSection">Scroll to This Section</a>.

Did you found this tutorial suitable according to your interest?

No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.


My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check