Smooth Scrolling Widget

On our previous post - Smooth Scrolling Back to Top we discussed the functions of scrolling back to top. So if you're asking what's NEW in this Smooth Scrolling widget? Then my answer is nothing special, just awesomeness.

Introduction

Okay, so for today's widget we will use CSS-TRICKS' Jquery Plugin, by using this plugin and by adding a little css and html we can make an awesome widget - a smooth scrolling back to top, scrolling go to bottom, and scroll to comment form! Inspired by Mangabird. And in addition, we will also use another Jquery Plugin to create a fade in and fade out effect to our widget when reaching a certain point.

External Scripts

FontAwesome (?)
Jquery Library v1.3.0 or higher (?)

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Add the following code before </body>

<ul id='Mba-scrollToTop' style='display:none'><li><a href='#top'><i class='fa fa-chevron-up'/></a></li><b:if cond='data:blog.pageType == &quot;item&quot;'><li><a href='#comments'><i class='fa fa-comments'/></a></li></b:if><li><a href='#bottom'><i class='fa fa-chevron-down'/></a></li></ul><div id='top'/><div id='bottom'/>

CSS

Just before ]]></b:skin> add the following code

#Mba-scrollToTop{list-style:none;position:fixed;bottom:50%;right:20px;cursor:pointer;z-index:99999}#Mba-scrollToTop a{color:#adadad;font-size:20px}#top{position:absolute;top:0}

JScript

 Search and Look for </body> and copy the following code just before it

 <script>
//<![CDATA[
jQuery(document).ready(function(){var t=150,e=500
jQuery(window).scroll(function(){jQuery(this).scrollTop()>t?jQuery("#Mba-scrollToTop").fadeIn(e):jQuery("#Mba-scrollToTop").fadeOut(e)})})
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash)
if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},500),!1}})})
    //]]>
  </script>

Save your Template.

Final Words

Your comment is greatly appreciated. If you're having any problem installing this widget, kindly let me know by leaving a comment below!
Until next time! Enjoy Blogging!

Did you find this widget useful? Sign Up to our Newsletter to get free updates straight to your inbox!