What is a back-to-top button?
If you don't know that what is a back to top button then don't worry I am going to explain briefly that what is a back to top button. Back to top button is like a tool for those websites that has long posts, let's imagine that you are reading a long post, and you are sliding down and down, after ending the post you have to go back up again by sliding up and up but with the help of this button, you can go up by only clicking one button, which will save your time and your efforts.Advantages of back to top button.
Having a back to top button is an advantage itself, back to top button really plays an important role in our website, it's really helpful for those who write a long post, it will save your time and effort for going up again.
Disadvantages of back to top button.
There are no disadvantages in the back to top button, back to top button will not slow your website loading speed and it will also not affect your SEO.
How back to top button works?
Back to top button is really like a weight script that will not affect your site in any way. To make back to the top button you need three things first one is HTML, the second CSS the last thing you need is JavaScript to make it perfectly working.
How to Create back to top button?
It's very easy and simple to create back to top button it will take just two minutes to add it to your blog. You just have to follow the simple steps given below and then I can add back to top button only on your website.
Steps:
- Go to blogger.com
- Click on theme
- After that click on the arrow and then click edit HTML
- Now find ]]></b:skin> and paste Css Code below it.
CSS
<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>
- After This, Find </body> and Paste these TWO codes above it.
HTML
<div class='backtotop hide'><svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
Script
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>
- The last Step Now Save Theme and the result on your blog.
Conclusion
That's the easy and the simplest step to create back to top button on your blog, and if you are facing any problem regarding back to top button or any other issues then you can contact us at any time. If your website doesn't have a back to top button then I really suggest you create a back to top button on your blog.
