How to make a scroll up button on a simple HTML website

Providing easy-to-use navigation on a website will provide benefits for visitors or website visitors. Like the scroll up button, it really helps visitors when visiting our website

When a visitor opens a fairly long article and the visitor is already at the end of the article, the visitor does not need to scroll several times to get to the top, just by pressing the back to top button the visitor will be taken to the top position of a website page:

The following html tags are required:

Position the code above

#btn-to-top {
display: none;
position: fixed;
background-color: #cdccfe;
colors: #000;
cursors: pointers;
padding: 10px;
border-radius: 5%;
bottom: 20px;
right: 30px;
z-index: 100;
font-size: 12px;
font-style: none;
borders: none;

Put the above css code in the .css file or you can write it in the . Here’s the js code we need to perfect its function:

window.onsroll = function() {scrollUp()};

function scrollUp() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementById(“btn-to-top”).style.display = “block”;
} else {
document.getElementById(“btn-to-top”).style.display = “none”;
function topUp() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

Save the js code above in a .js file or you can write the code right above it

When the visitor scrolls 10px then the button will appear and when the button is clicked it will bring the visitor to the top position by themselves. That’s the review that I can convey, hopefully it will be useful for friends, Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *