In this Article I'm writing a detail tutorial on How to Add Smooth Back To Top Button only using JavaScript no Jquery required . It is very simple to do with just a few lines of code.View the demo to see it in action.
So here’s a tutorial of how to implement a smooth scrolling back to top button only using JavaScript on your Blogger blog.
Step-1
Go to Blogger Dashboard >> Template >> Edit HTML
In the code editor find for
</b:skin> and put below CSS file to above </b:skin> . #scrolltotop {
text-align: center
}
#scrolltotop {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
z-index: 99999999;
background-color: rgba(232, 98, 86, 0.8);
color: #eee;
font-size: 22px;
font-weight: bolder;
line-height: 60px;
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
padding-top: 2px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
border-radius: 50%;
}
#scrolltotop:hover {
background-color: #888;
opacity: 1 !important;
}
#scrolltotop.show {
visibility: visible;
cursor: pointer;
opacity: 1
}
#scrolltotop.show-out {
visibility: visible;
cursor: pointer;
opacity: .5;
}
Step-2
Find
</body> tag and put these html code. <div id="scrolltotop"><span>⇧</span></div>You can also change Arrow
⇧ using HTML entities: Here you'll find some HTML arrow codes, arrow characters and entitiesStep-3
Have you pasted HTML code now paste the script function below html tag you have pasted in step-2 and above which
</body> tag <script type="text/javascript">
//<![CDATA[
window.addEventListener("load", function() {
scrollTo = function(element, to, duration) {
var start = element.scrollTop,
change = to - element.scrollTop,
currentTime = 0,
increment = 20;
var animateScroll = function() {
currentTime += increment;
var val = Math.easeInOutQuint(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
};
var toptoback = document.getElementById("scrolltotop");
document.addEventListener('scroll', function() {
(document.body.scrollTop > 100) ? toptoback.className = 'show': toptoback.className = '';
if (document.body.scrollTop > 1000) {
toptoback.className = 'show-out';
}
});
toptoback.addEventListener('click', function() {
scrollTo(document.body, 0, 3000)
});
Math.easeInOutQuint = function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
};
});
//]]>
</script>The Arrow I am using is HTML entity so make sure that
<meta charset="UTF-8"/> tags have in your blogger template after opening <head> tag.Hope this article helped you a lot, subscribe to our blog for more blogger content.
Post a Comment