Smooth Scrolling Back To Top Widget For Blogger
I am sure you have already seen a "Scroll to Top" or often called as "Back to Top" button. Scroll to top button is one of the common things that can found in every blogs.
Minified Script
Improved HTML
SEO friendly
Fully Customizable
Responsive
Find (ctrl+f) </body> and just above it add the following code
Save your Template
Introduction
Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. Yes, because some users are lazy to scroll up, and instead of scrolling up they may just close the browser tab - that we obviously don't want to happen. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some blogs include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to add a smooth scrolling back to top for blogger.Features
Lightweight CSSMinified Script
Improved HTML
SEO friendly
Fully Customizable
Responsive
External Scripts
Jquery Library v1.3.0 or higher (?)Live Demo
Demo not available.HTML
Go to Blogger » Template » Backup your Template » and Edit HTMLFind (ctrl+f) </body> and just above it add the following code
<a href='#' id='Mba-scrollToTop' style='display:none;'>
<svg height='22px' version='1.1' viewBox='0 0 22 22' width='22px' xmlns='http://www.w3.org/2000/svg'><polygon points='16.615,10.647 10.98,4.379 5.345,10.647 9.596,10.647 9.596,19.491 12.364,19.491 12.364,10.647 ' style='fill:#ADADAD;'/><polygon points='2.748,5.503 2.748,2.748 19.233,2.748 19.233,5.51 21.981,5.51 21.981,0 0,0 0,5.501 ' style='fill:#ADADAD;'/></svg></a>
CSS
Find (ctrl+f) ]]></b:skin> then add the following code just above it#Mba-scrollToTop {position:fixed;bottom:20px;right:20px;cursor:pointer;z-index:99999;}
JScript
Find (ctrl+f) </body> and just above it add the following code<script type='text/javascript'>
jQuery(document).ready(function(){var t=220,e=500
jQuery(window).scroll(function(){jQuery(this).scrollTop()>t?jQuery("#Mba-scrollToTop").fadeIn(e):jQuery("#Mba-scrollToTop").fadeOut(e)}),jQuery("#Mba-scrollToTop").click(function(t){return t.preventDefault(),jQuery("html, body").animate({scrollTop:0},e),!1})})
</script>
0 Comments
Be the first to comment