How to add Scroll Back To Top button in blogger using html- CSS -JavaScript

This code for make Scroll Back To Top button in blogger, blogger no accept some codes of javascript, so we need to add before script code //<![CDATA[ and //]]> before close script tag <!--gototop--> <style> #Gototop {display: none; position: fixed; bottom: 20px; left: 30px; z-index: 99; font-size: 20px; border: none; outline: none; background-color: white; color: #020202; cursor: pointer; padding: 6px; border-radius: 50%; box-shadow: 0 0 3px 1px;}#Gototop:hover {background-color: #555;} </style> <button class='fa fa-arrow-circle-up' id='Gototop' onclick='topFunction()' title='Go to top'/> <script> //<![CDATA[ //Get the button var mybutton = document.getElementById("Gototop"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } //]]> </script> <!--gototop-->

© 2025 Manajmnt code

Share to :

☷✎

Related

• How-to create table scroll to left & right with button in htmlin this example we learn how-to create table scroll to left & right with button in html using CSS an… Read More
• How-to make input form and textarea like bootstrap stylein this example we learn how to make input form and textarea like bootstrap style with CSS only <… Read More
• How-to run HTML, CSS, JS code in iframe from textarea value In this code we will be share with you how to create simple editor with preview for HTML CSS and Jav… Read More