Add Scroll to Top JQuery Button to Blogger
The button will not appear when the page is already on the top i. e. page is not scrolled. When the page is down then it shows on the below of right corner Below is the procedure to implement the button to blogger blog.
Edit HTML and adding the code
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 www.bloggerwp.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 www.bloggerwp.com-->
<a href="#" id="abt-Top" style="display: none;">Scroll to Top </a>
You can customize the CSS to match your requirements. You can replace the CSS button with image by changing the CSS background with URL of the image that is using the tag background: url()
Your Scroll to top button is ready. Don't forget to share it with your friends and write your comment till then Peace, Blessings and Happy Scrolling.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment