How to Add Pure Javascript Smooth Back To Top Button To Your Blogger Blog
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.
Go to Blogger Dashboard >> Template >> Edit HTML
In the code editor find for
Find
You can also change Arrow
Have you pasted HTML code now paste the script function below html tag you have pasted in step-2 and above which
The Arrow using is HTML entity so make sure that
Hope this article helped you a lot, subscribe to our blog for more blogger content.
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>. 123456789101112131415161718192021222324252627282930313233343536373839404142434445#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. 1<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 12345678910111213141516171819202122232425262728293031323334353637<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 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:
0 comments: