How to Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.
Ad
Now we’ll see how to add
- 1. Image Back To Top Buttons With 19 Different Styles
- 2. Text Back To Top Link with different styles And Colors
]]></b:skin>
And before it add this code
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
</body>
<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>
But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop-5.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop4-1.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop3.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop4.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop6.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop7.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop8.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop9.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop10.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop11.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop12.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop13.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop14.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop15.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop16.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop17.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop18.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop20.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop19.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop21.png
After Replacing the Image-Url with your favorite button url, it should looks like this
<a href="#" id="backtotop"><img src="https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop21.png
" alt="back to top" /></a>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
and then click Save Template
And you are done.
Related Posts:




Disclosure: This page may contain external affiliate links that may result in us receiving
a commission if you choose to purchase said product. The opinions on this page are our own.
We do not receive payment for positive reviews.