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)

» How to update your CHROMEBOOK

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

» Smooth Scroll Back To Top Button - PART 2

» Setup your Chromebook for Web Development

» How can I access the MYSQL command line with XAMPP for windows? - SOLVED

collections_bookmark Category :: Howto
date_range Published :: 1 year ago At: 01:00 AM
event_note Detailed Date :: May 27th, 2020
person Writer :: Code
  • RECENT POSTS
4 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


5 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


5 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


5 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


6 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


7 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


9 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share