Soft smooth back to top button for blogger add below given
code in your blog for show Scroll back to top button in bottom of right side by
pressing this button page will be reach top in the page. You can replace
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTk4LtWsV57D7GC-izEzqus5h5IOql5CtXDvkM08iLd8MMY0HSgPlV4l4zOJyaF6jdlUgNkMo4BUYktgx6X27uRL0BC9lHnXneTTRBadZnsAuXJOzgyL84ea_8VlfaFnin3J2nOgT9mI/s1600/go+to+top+button.jpg
this image url with your favorite image as a back to top button image in below
given code.so let try smooth back to top button in your blogger.
Add below given code in your blogger blog as a widget by
HTML/JAVASCRIPT widget.
<!--ABT Start-->
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#"
class="back-to-top"><img alt="Back to Top"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTk4LtWsV57D7GC-izEzqus5h5IOql5CtXDvkM08iLd8MMY0HSgPlV4l4zOJyaF6jdlUgNkMo4BUYktgx6X27uRL0BC9lHnXneTTRBadZnsAuXJOzgyL84ea_8VlfaFnin3J2nOgT9mI/s1600/go+to+top+button.jpg"
></a>
<!--ABT End-->
