How To Add Responsive Back To Top Button On Blog - Back To Top Button is a blog widget that serves to facilitate the visitor back to the top of the blog. So, with that button, visitors don't bother to scroll up. Usually this button appears in the footer or at the very bottom of the blog.
Therefore, infoBlog will share a tutorial about How To Add Responsive Back To Top Button On Blog. Follow the steps below . .
How To Add Responsive Back To Top Button :
This widget uses jQuery, so please add the code below before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
- Go to your Blogger Dashboard ›› Layout ›› Add a Gadget ›› HTML/JavaScript.
- Copy and paste the code below on HTML/Javascript column.<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="Back To Top Image URL" />
<script type="text/javascript">
/* Responsive Back To Top Button by infoBlog */
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.infoaboutblog.blogspot.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script> - Then, click Save.
*NOTE
›› Replace Back To Top Image URL with your own back to top image URL
Back To Top Image URL by infoBlog :
Style 1 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhlsONLK3RrCjPaV19bfACo3uoXgkB8CjnZI7v0bCE1MZ-wzYAICWOKRYRX3Y-T7fO_XYUaubts9W3nWI8EZT3XE6HG6GWrDGJb5wFj_XKYJ1EXzy6Y7IgaG3w8jBMCzbwQOzUklH7gK6/s1600/back+to+top10.gif
Style 2 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWooJfLqLcpExykUn3bApwP9sNuqqEzTbzzJtzdW2POGDhu3v82rQwcQTtDg-Gvu8ZZzwauIwEPP-GjZVWzn2lgazV7EdSF62kh2bNr015l09UzY2OjQcWA53dDjT1k6W5-pDzsCruOk/s1600/back+to+top.png
Style 3 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBAE_otVghVgWJKag46uHQLqmAEDSzMBJ3fRDlS590pmE7_EstSI2cr3QAzLLVhAB_enyT_Vr4N10Tl5vp6gJ6-NXsNdGH39zEA1wHgk7oMt7UNTwH9tBDdMcAuj_1P34pjspbh97dgiM/s1600/back+to+top.png
Style 4 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddn1Jg527orrFF5rgPJvWlGj4U21kHgsPsHowKPFgoOHGyjazmtjZ1EQiqt-_Gq5DVorAOvuzxhWFsAC8WtKD9nMsBFGFe0PBclbydMtlnq5A5GNPBUzGxlkwqqe6szSRkh4EBFKCg_0/s1600/back+to+top.png
Style 5 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKF4VmPkoci9HGpYBbUjuKr2mtUMewFiyRFCXGiYBhFJS4OpZhiEixUG6dJrJD8C28RnhhiYeWiSVccWc_6RyNHceJodOjb4YWCJMYMWzYKxDVvHHIrQ9vm5P3_YcUq5SMFhLXN43m4M/s1600/back+to+top.png
Style 6 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1moMQ1Oo0TTk1SKjXclenpun88MNBUNPPwuJCGhWM_wO56OqMhirx_c5Hw5jScVH8N6esZcrmf7SYNWcDLQDvOQ6LklVi39Se7mjdq_p7WR6UpMdJgTEp6PVn21FsIAWWLJcH3jMGEXU/s1600/back+to+top+button.gif
Style 7 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iL5ZP2rrIgPc39kC04COxu2ubCkVq4tKXgfptnY9cfzvWj9l36Lxyv7o_6oPOkHMob1b8akiAOfQXqxVXJ8V8wiR7GomPfU98_SGK6Z4t9FaoUajfd6xxkbhb8zn1rloLHFNau53seA/s1600/back+to+top+button.png
Style 8 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5gHkyV3os5Gf7mCKooiU38vhTRONxpXCViKkO-OM9D70iYbLNGOob6C77LfdE8WpzRaCTP1nVDBA3Rzp5MINVyKk4R9FbMjRaeE0acYGgLB6ETAbmXfrgnfi_p3Y2hnSoOSrXNZVrGM/s1600/back+to+top+button.gif
Style 9 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16leSktSa-LqrcWDKRL8-3blRsEtbLXcJjWHJGdj4BDiLlqeYGHoLj6wL1a15b-5JgPfAT8HWdPZQx0txjFVA62MFBqxE6XTGM9chfXe5OzRMaOrQaMb50mIZYx3ya_FWhBbd7GvJdOA/s1600/back+to+top+button.png
Style 10 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJYi4VUggCFm5jCVr8l7E8fzJPS03rm8toF8LdPj9VZbhw8osvqJD6L0PRDQGj2kB3hizRuEqOcue1B-zmyNnQSxBBHBlG2K1k0wcinHXU_UBbBXpN2CGkfDh8SbQ0d7Zq9grVYd0NPw/s1600/Back-To-Top.png
Style 11 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoKtmhICPutNYc8bfEP9QUXJl9Hpe5Y3sjgeFRXd4qslCfQeJ9GZJN_Hh8qTgALbe-KUuaeJcfwOod-8VKYFsx3W4Iv2gFJ5ithR1qSoRK7uT-opYcrNZoRzxH33iQLW3-i8xNiA3rHs/s1600/back-to-top-button.png
Style 12 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_yNPZdxtU78MzPWccHsOWjlJQLXyhBtk7L7OfQv__jmAi0F2A17Tdj-WysEi_mZx57hU6D8WWmMPwOI_GGw6NddFLXgs0tSIjRL-fvDKnNBt9r09U2tbbV-dyizSyTLcynjX0JhcxaQ/s1600/back-to-top-button.png
Style 13 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYSriPmsTWjp923yipum31AN9luFTbNO89JVo01-_-yxnZRzMyJ6UCMyrlzFqd24kGcWqPOT7R6yKmByJrVZG3Dshbnl5RN-fgFcsWslx4BP388ChwEBUJVBY4AKaF0aXvpTPjoKVS3k/s1600/back-to-top-button.png
Style 14 ››
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltlbjB0nGxaqejk70iBMRvBaFYswroB-0MJB9LnyoZMx7LtXk_9T8gUCy9AsddIoXJpK2i-8IuMuRV5JTMZLHRGkH73xWbDFtSjJeXFjh3tl12ZGhVzmgI-qGTHuZtRw87i-zizfcSZQ/s1600/Back-To-Top.png
Enough of tutorial about How To Add Responsive Back To Top Button On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.
Thanks For Your Visiting 
EmoticonEmoticon