YogeshChauhan . com

How to add a scroll back to top button using JavaScript and CSS?

in CSS & JavaScript on August 11, 2019

In this blogpost I am going to show you how to add a button which takes user to the top of the current page if the user has scrolled down to read any article. I am going to use JavaScript and CSS to set the button. Let’s add step by step code and create the full functioning button. First, lets add simple HTML button in your page.

In above HTML code I have just added simple HTML button with id and onclick event handler. Which is just basic HTML code. Now, let’s add some CSS style to set the button’s position on different page movements.

In the style above, I have kept the button hidden by using display property and I’ll use JavaScript to change that display style later on. To set the button on the bottom of the page I’ve set bottom property as well and I’ve kept the position property fixed as I want the button to be stedy on the page while user reads the article and not scroll down and disappear! That would not make any sense!

Similarly, I am setting the right property so set the button on a proper position on a page. Button’s z-index property is 99 because I don’t want it to overlap with any other elements and be in front of all the elements, clearly visible. I have removed border and outline but you can keep it to give the button a different look, it’s up to you.

I’ve set the color and background-color properties as per the color combination of my pages so that’s up to you to decide what color you should go for. Also for, padding, border-radius and font-size, you can choose your own style. I have added cursor property as a pointer to add a mouse pointer on hover. Also, I am changing the color of the button on mouse hover.

Now you have an idea about the position of the button. All we need is to show and hide the button when user scrolls down and up. I’ll do that using JavaScript.

In the JavaScript code above, I’m calling a function on the window.scroll event. In that function, I am checking if the user scrolls 20px or more from the top using document.body.scrollTop. If that condition is true then I am changing the button’s display from none to block and in else condition I am changing it back to none. So now we have a working button which will be displayed when user scrolls down 20px or more.

What we need is one more function to tell the browser to go to top position on the page. For that we are using button’s onclick event and calling a function GoTopFunction and setting the same document.body.scrollTop to 0px aka to the top of the page.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to add a scroll back to top button using JavaScript and CSS?CSSbin2hex() and chr() String Functions in PHPPHPHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to retrieve homepage URL in WordPress?WordPressHow to create HTML elements with ID and class using JavaScript?HTMLWhat is Object Mutability in JavaScript?JavaScript