To Make Easy Navigate Your Blog Posts for Visitors Add Scroll To Top Button in Your Website

In this blog today I will describe that How To Add Scroll to Top Button in Site with different styles. When reader enjoying your article and reach down on page. With this sticky button your website pages navigation from down to top just under one click of visitors. And it’s allow users to save their time for smooth and quick reading the blog.

Many websites when you visit may you notice that. There is one small button or any kind of icon in the right side (mostly) of the page. This is fixed position and normally it’s invisible on landing page. Once you scroll down the page it will appear in fixed place and will not move anywhere when page scrolled. If you go back on top again this will disappeared.

Even with adding this button your site will looks more professional.

Once you Add this button Code in HTML, will take the user to the top of the page when clicked at it.

How To Add Scroll to Top Button in Site

Here is CSS Code and JavaScript Base Codes for smooth scrolling

You will know also in this blog that there is a native CSS features to change for this: scroll-behavior.

Step-1 Add HTML Code

First of all you have to Copy and Past This Code in HTML

In title attribute you can exchange any words in title attribute “Go To Top” or as you like. This will show to users when ever they bring mouse over the button.

Copy Code
<button onclick="topFunction()" id="ScrollBtn" title="Go to Top">Top</button>

Step-2 Add CSS Code

In the CSS you can change size of “Top” button, background color. Letter color font size etc ….. as your favorite look. If you want to change location try with bottom and right values in CSS code and adjust where you need. When mouse comes on button it will change color with likely dark gray. This is also you can swap from ScrollBtn:hover Background-color #555 to any of your Preferred one.

Copy Code
<style>
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
}

html {
 scroll-behavior: smooth;
}
#ScrollBtn {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 30px;
 z-index: 99;
 font-size: 18px;
 border: none;
 outline: none;
 background-color: red;
 color: white;
 cursor: pointer;
 padding: 15px;
 border-radius: 4px;
}

#ScrollBtn:hover {
 background-color: #555;
}

</style>

Step-3 Add JavaScript Code

JavaScript is very important element in page scrolling bottom to top code. Please do not change it if you not have much experience with java.

Copy Code
<script>
//Get the button
var mybutton = document.getElementById("ScrollBtn");

// 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>

You Can learn with More details on W3Schools.com

conclusion

Today blog How To Add Scroll to Top Button in Site I try to explained in easy way. I hope you will find it useful, if there is any conclusion please comments