Add “Go to Top Button” with CSS and Jquery. It is a Shortcut to come to top when you are at Bottom of page.
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.
<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/Ffb7p.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">
#w2b-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() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>You can Customize the CSS for Your Own Declarations and you can replace the text with Image also.
You Are Done!
Switching the text to an image can be done by modifying the CSS.
@email encryption service
yes!
Add image as background image and specify the width and height.
one of the important css declaration for this type is text-indent and is specify as -9999em to disappearing text.
That's All!
scroll to top not working in my blog www.paulsantosh.com
@Paul Santosh
You Have more then one jquery plugin
so remove duplicate jquery plugins
it works fine
ok
Thank you for the code. This is exactly what i was looking for.
I have 2 questions though, can you show me how to
1. add more buttons using this, like for ex. home button etc (each button will have different links)
2. use mouseover and mouseout option for image change in this function?
Thanks once again.
how to remove duplicate JQuery plugins??????????
thanks a lot..i like u'r tips awesome
Jquery not work on my blog. Only work with css. Need help with it
Jquery didn't work for me either. Thanks again. I'm probably flooding your blog with the label thing and the read more. I got it to work already. Thanks
thanks for this post i used normal script(not scroll)
Wow, very cool..
I want to try it
thanks
awesome man!!!
http://sanship.co.cc
very cool..
i want use it for my blog
thanks for sharing
Scroll To Top Button Goes Behind The Template What To Do
Cool ^_^
Thanks, working just fine
what the hell harish
Error parsing XML, line 519, column 3: The content of elements must consist of well-formed character data or markup.
www.ptmaroct.blogspot.com
it works! thankz.
Its not working in explorer. any adia how to fix it please?
What is your blog url?
How can i change the position of left jquery “Scroll To Top” Button from right to left ?
Got The Answer Change Right To Left in “” right:10px “”
how to change “Scroll to Top”
to background image