Previously I had written a post on "How to create a Simple Back to Top Button" for designing your own buttons using few basic softwares such as MS Powerpoint and MS Paint. As the name says, it was a simple button and now regarding a request from "Rafaqat Ali", here is another blog post for a Scroll Back To Top Button instead of moving to top quickly. For this, you need to add a simple jquery in the <head>.../<head> section of your blog layout and call the function in our code - all in just two steps as given below.
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
Use the above codes in between <script> ...</script>
STEP 2: Call the JQuery function by adding class="scrollToTop" inside our code
<a href="#" class="scrollToTop" style="bottom: 10px; display: scroll; left: 5px; position: fixed;" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyILfA0YcFnS3WRUJQfHdL2Azx8ATLkP78QUR6R0EcAsQwk1l6J_lbwefjLPkGHqfwy6gvJYDngYlNvBOSm_FS4nXLOkavMdmBPIH86usnJaTHRdpflmTtc6RIvoh7BvIaLbupgZN0XmNx/s1600/back+to+top+button.png" />
</a>
Just add the above codes (under step 2) in Blog Layout -> Add a Gadget -> HTML/JavaScript and save your arrangement. Now, go to your webpage bottom and click the "Back to Top" button to see how good it scroll backs to the top.
Note: Notice that the only change we had made to our previously written back to top button code was the addition of just class="scrollToTop" in the a href above.
Note: Notice that the only change we had made to our previously written back to top button code was the addition of just class="scrollToTop" in the a href above.
How to Create An Animated Scroll To Top Button
In case of creating an animated scroll back to top button, just use a .gif image instead of a .png image in the code above,
Example: Try this gif image (credits: funnybunnywebsites)
whose image code is inserted as below,<a href="#" class="scrollToTop" style="bottom: 10px; display: scroll; left: 5px; position: fixed;" title="Back to Top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlB5kw_AQUi-kvAmD8diCwvthYgZcixDUBpL4FtO-hNbRbBs7T9Bfjp7my0zmhApApHyl9Hjs8L87zvYp_rsPXTU3CaGnO8BKDZR7Thyphenhyphensggp4fHicXqgDI4LzxpsLo44usFHPx00jpisHA/s1600/animated-up_arrow-red-yellow.gif" />
</a>Hope you have benefited from this post! Let me know your thoughts in the comment below.
blog without jquery library .. they need to add jquery library too .. ! nice information :)
ReplyDeleteAnkur, thanks for dropping by....btw you don't need to add more than what is given above. And the codes above works perfectly having tried and using them personally :)
DeleteNice post..helpful for those on Blogger platform... please write something for us too..I mean for Wordpress bloggers... :-)
ReplyDeleteI would love to ...but right now my target is blogspot platform and yes, if I ever do write one on wordpress, I will sure let you know :)
DeleteVery useful post Uma! Thank you very much!
ReplyDeleteAs Ms. Maniparna asked (I guess, wordpress don't allow us to edit template as such.) I would also like to know if we can edit wordpress blog too!
Regards,
Sindhu
Tantu
The Arts & Me
I think you can edit Wordpress blog as well although you should be sure not to mess up the codes. Do check this link "http://codex.wordpress.org/Editing_Files" for support :)
DeleteThank you very much Uma... I always wanted to edit my templates... Thanks a lot!
Delete