Back to top button with pure Javascript

  1. Full Code
  2. Button design
  3. CSS code
  4. JavaScript Code

I want to have a back to top button that takes the user back to the top of the website when clicked. The button shoud have the following features:

  • appears only after the user scrolls down a certain amount of pixels;
  • change color when hovered;
  • take back the user to the top of the website with an animation;
  • use vanilla JavaScript, no libraries.

Full Code

Button design

I’m going to put an SVG image directly into the HTML code (also known as inline SVG) to be able to change its color on the fly with CSS. I’m going to borrow the chevron up icon from the fontawesome set. After some clean up, the code to be included in the HTML looks like this:

1
2
3
4
5
<div id="back-to-top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
</svg>
</div>

There’s nothing to do here, this code goes as it is into its div container, which is identified with an id.

CSS code

For the CSS code I need three selectors: one for the general properties; one for the hover effect and the last one which will make it visible/invisible.

1
2
3
4
5
6
7
#back-to-top {
display: none;
position: fixed;
bottom: 10px;
right: 80px;
max-width: 30px;
}

The button is hidden by default (display: none) and has a fixed position. The specific values for the position depend on the layout of the website, in my case, the button should appear on the bottom left of the website. The max-width property sets the width to which the svg will be restricted to: if not set, the svg will fill all the available space.

1
2
3
#back-to-top:hover svg{
fill: #212121
}

The second selector changes the svg color when hovering over the button container. It should be noted that the CSS property that controls the color of an SVG path is called fill, not color.

1
2
3
#back-to-top.back-to-top--show{
display: block
}

The above rule shows/hides the button: when the back-to-top--show class is added (it will be added by the JS code), the button shows up. Notice that I can’t simply use the .back-to-top-show selector because a class selector is always less specific than an id selector (as #back-to-top) and so the rule will never be applied on top of the previous one with the id selector. On the other hand, enqueing the class selector after the id selector creates a new selector that is more specific than the id alone, and so it takes precedence.

Lastly, I’m trying to use the BEM naming convention as much as I can, that’s the reason for such a verbose name.

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var backToTopBtn = document.querySelector('#back-to-top');

window.addEventListener('scroll', function() {
if (window.pageYOffset > 200) {
backToTopBtn.classList.add('back-to-top--show');
} else {
backToTopBtn.classList.remove('back-to-top--show');
}
});

backToTopBtn.addEventListener('click', function(e){
e.preventDefault();
document.body.scrollIntoView({behavior: 'smooth', block: 'start'});
});

The code is pretty simple. For the sake of convenience, I’m creating a variable called backToTopBtn with the pointer for the button container (line 1).

The second statement (lines 3-9) tells the browser to listen for a scroll event and then, if the page is scrolled by more than 200 pixels, add the class back-to-top--show - the one I set up in CSS that makes the button visible - to the button container. When the page is scrolled up by less than 200 pixels the class is removed.

The third statement tells the browser to listen to a click event on the button and then call the scrollIntoView Javascript method, which is a built-in method that does exactly what I want: scroll back to the top of the page. The method has several options; the ones used here set the scroll behaviour to smooth and the scroll target to the start of the page).

HTML

1
2
3
4
5
<div id="back-to-top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
</svg>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#back-to-top {
display: none;
position: fixed;
bottom: 10px;
right: 80px;
max-width: 30px;
}

#back-to-top:hover svg{
fill: #212121
}

#back-to-top.back-to-top--show{
display: block
}

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var backToTopBtn = document.querySelector('#back-to-top');

window.addEventListener('scroll', function() {
if (window.pageYOffset > 200) {
backToTopBtn.classList.add('back-to-top--show');
} else {
backToTopBtn.classList.remove('back-to-top--show');
}
});

backToTopBtn.addEventListener('click', function(e){
e.preventDefault();
document.body.scrollIntoView({behavior: 'smooth', block: 'start'});
});
dark