fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
How to a create Scroll To Top Button using HTML CSS & JAVASCRIPT

Have you ever scrolled allllll.. the way to the bottom of the page, and then think, "I wish I would just click a button that takes me at the top without using the provided browser scrollbar. Well this is the main reason why I have published this article.

Why should I have this button?

Well, this button allows users to easily scroll back to the top of the web page when clicked on the button. And more so it can be a great way to allow/enable visitors of your website to navigate easily, especially if you have long-scrolling pages.

Tutorial
HTML

In this html document, make sure you link the css and script file.

copy


<html>

<head>
<title>ScrollBack</title>
</head>

<body>

<div class="content"></div>
<div class="btn"></div>

</body>

</html>
	

CSS

Create a file and name it any thing you want so long as you link it in the head section of the Html document.Incase i called mine style.css.

copy

body{
margin:0;
padding:0;
position: relative;
}

p{
padding:20px;
margin:0;
text-align: center;
font-size:2rem;
}

p:nth-last-of-type(odd){
background-color:#eee;
}


p:nth-last-of-type(even){
background-color:#333;
color:#fff;
}

.btn{
background-color:#f00f;
width:50px;
height:50px;
border-radius:50%;
position: fixed;
right:0;
bottom:0;
opacity: 0.7;
display: none;
cursor: pointer;
}


Javascript
copy

// Listens/waits for the DOM to fully load.
document.addEventListener('DOMContentLoaded', () => {

const contentDiv = document.querySelector('.content');
const backBtn = document.querySelector('.btn');

//Inject paragraphs in the DOM with number counts
for (let i = 0; i <= 50; i++) {
contentDiv.innerHTML += `

Number ${i}

`; } //Invoked when users scroll on the page. window.onscroll = () => { if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { backBtn.style.display = 'block'; } else { backBtn.style.display = 'none'; } } //Takes user back to top when clicked backBtn.addEventListener('click', () => { window.scrollTo(0, 0); }); });

If you don't feel like writing code then you are also covered because there are sites like Scrolltotop that will enable you to have such functionality by just pasting a simple snippet of code on your website.

Related Post(s)

» Setup your Chromebook for Web Development

» How To Install Kazam Screen Recorder On Ubuntu

» Smooth Scroll Back To Top Button - PART 2

» Why can't my windows 10 host file be edited - Solution

» How To Set A Meta Theme Color For Your Website

collections_bookmark Category :: Howto
date_range Published :: 1 month ago At: 01:00 AM
event_note Detailed Date :: May 27th, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share