How to a create Scroll To Top Button using HTML CSS & JAVASCRIPT
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!
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.
<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.
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
// 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.
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» How can I access the MYSQL command line with XAMPP for windows? - SOLVED
» Smooth Scroll Back To Top Button - PART 2
» How To Install Kazam Screen Recorder On Ubuntu
» How to update your CHROMEBOOK
» How To Set A Meta Theme Color For Your Website
collections_bookmark Category :: Howtodate_range Published :: 3 years ago At: 01:00 AM
event_note Detailed Date :: May 27th, 2020
person Writer :: Code