Table Of Contents
Here is a Scroll-to-Top Button to your Website simple in HTML code.You don’t need to any JavaScript or additional CSS file. Because this is only one HTML code.just copy it and paste where you want to show it to your website.you can use this code for your blogger website or your wordpress website also.You dont need to download any plugin for your wordpress site to show scroll-to-top button.This code is html and css code both of them in one place. So you dont need to link external css aur java script file to your html document.
Adding Scroll-to-Top Button on website, How it works?
On blogger
just copy the code that given below and go to the blogger layout.Just go in the footer section , insert the gadget and take the HTML gadget from the gadgets list and paste this code wherein.
Just go to your wordpress dashboard and go to the appearance section and then widget section ,there you can see layout of your website, go to the footer section, take the HTML widget from the widgets list and paste this code there.
Adding Scroll-to-Top Button on website The code is here
<!doctype html><style>body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;}#myBtn {display: none;position: fixed;bottom:20px;right:20px;z-index: 99;font-size:30px;border: none;outline: none;background-color: red;color: white;cursor: pointer;padding: 15px;border-radius: 4px;}#myBtn:hover {background-color: #555;}</style><button onclick="topFunction()" id="myBtn" title="Go to top">Top</button><script>var mybutton = document.getElementById("myBtn");window.onscroll = function() {scrollFunction()};function scrollFunction() {if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {mybutton.style.display = "block";} else {mybutton.style.display = "none";}}function topFunction() {document.body.scrollTop = 0;document.documentElement.scrollTop = 0;}</script></!doctype>
Your Scroll-to-Top Button looks like this.
If you want to download simple code for adding whatsapp chatting button to your blogger and wordpress site just click here.
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom:20px;
right:20px;
z-index: 99;
font-size:30px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
