Want to join a stylish Scroll to Top Plugin to WordPress ? If Yes. Below are few easy steps to get your hands on thus. The widget uses no image and the button is made from CSS. The scrolling effect in the plugin is due to the jQuery accessory.
The button will not appear gone the scroll bar is at summit i.e. page is not scrolled. As one scrolls a button will appear by now reference to the right bottom. Below is the procedure to money uphill front the button to your Blogger blog.
Click on Edit HTML option in Blogger and search for </body> tag in your template by pressing Ctrl + F. Add the below given code just above </body> and save the template. Thats it.
<style type="text/css">
#abt-Top {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<!-- Scroll to Top Plugin for Blogger by earnmoneyguru.blogspot.com-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/>
<script type='text/javascript'>
jQuery(function($) {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
jQuery(function($) {
$("#abt-Top").scrollToTop();
});
</script>
<!-- Scroll to Top Plugin for Blogger by earnmoneyguru.blogspot.com-->
<a href="#" id="abt-Top" style="display: none;">Scroll to Top </a>
Title :
Add Smooth Scrolling Back To Top Button
Description : Want to join a stylish Scroll to Top Plugin to WordPress ? If Yes. Below are few easy steps to get your hands on thus. The widget uses...
Rating :
5