Go to Top button is a link that sends your viewer to the top of page once clicked.
This will help your readers navigate better, especially so if you have long pages.
This link is usually located at the bottom of page or in the footer area.
And I am going to show how to add Go To Top Button With Css and Jquery.
Demo For CSS Button : Go to Bottom of This Page and See it's Action at Left Bottom Corner.
Demo For Jquery Button : Go to Bottom of This Page and See it's Action at Right Bottom Corner.
-Use the Following Button To add this Widget on your Blog Easely.
This will help your readers navigate better, especially so if you have long pages.
This link is usually located at the bottom of page or in the footer area.
And I am going to show how to add Go To Top Button With Css and Jquery.
Demo For CSS Button : Go to Bottom of This Page and See it's Action at Left Bottom Corner.
Demo For Jquery Button : Go to Bottom of This Page and See it's Action at Right Bottom Corner.
Add 'Scroll to Top' Button With CSS:-
-Use the Following Button To add this Widget on your Blog Easely.
OR
-Use the Following code and Put it before </body> tag on your Template and Save.
-Use the Following Button To add this Widget on your Blog Easely.
-Use the Following code and Put it before </body> tag on your Template and Save.
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/ZrOOd.png"></a>
Add 'Scroll to Top' Button With Jquery:-
-Use the Following Button To add this Widget on your Blog Easely.
OR
-Use the Following code and Put it before </body> tag on your Template and Save.
<style type="text/css">
#geekonik-StoTop {-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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(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")
})
}
});
$(function() {
$("#geekonik-StoTop").scrollToTop();
});
</script>
<a href='#' id='geekonik-StoTop' style='display:none;'>Scroll to Top </a>
#geekonik-StoTop {-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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(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")
})
}
});
$(function() {
$("#geekonik-StoTop").scrollToTop();
});
</script>
<a href='#' id='geekonik-StoTop' style='display:none;'>Scroll to Top </a>
widget by-Ayush Jain