Yogesh Chauhan's Blog

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
The Difference Between Arrays and Objects in JavaScriptJavaScriptThe basics of CSS Box modelCSSHow to create ‘share on LinkedIn’ link using just HTML?HTMLWhat is a “promise” in JavaScript?JavaScript:in-range and :out-of-range selector in CSSCSSKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?Miscellaneous