`
    
    
      
    
    
    

      

        Start scrolling the page and a strong
        "Back to top" button  will appear in the
        bottom right corner of the screen.
      
      

        Click this button and you will be taken to the top of the page.
      
    
    `

    `
    

# btn-back-to-top {

    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    }
    `

    `
    //Get the button
    let mybutton = document.getElementById("btn-back-to-top");
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
    scrollFunction();
    };
    function scrollFunction() {
    if (
    document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20
    ) {
    mybutton.style.display = "block";
    } else {
    mybutton.style.display = "none";
    }
    }
    // When the user clicks on the button, scroll to the top of the document
    mybutton.addEventListener("click", backToTop);
    function backToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    }
    `

We’ve all been there. You’ve found a fantastic online guide, scrolled all the way to the bottom, and then think, “Wow, I’d love to see what else this site has to offer!”

But then you have to scroll.

ALL.

THE.

WAY.

TO.

THE.

TOP.

And then you think…. “Hmmm, nevermind.” And close the page.

As a web designer, this is just about the last thing you want someone to do when they land on a site you’re building. Luckily, modern web design best practices have given us the solution to this common UX problem: the sticky back-to-top button.

What Is a Sticky Back-to-Top Button?

Also known as a scroll-to-top button or go-to-top image, the sticky back-to-top button is a helpful navigation element that helps users get back to the top of the web page they’re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it’s always accessible as the user scrolls down the page.

Things To Consider Before Adding a Back-to-Top Button

Like any popular design trend, we encourage you to take a step back before implementing it on your site to ask yourself: If I’m going to build this, what back-top-button guidelines do I need to follow?

Here are a few questions to answer before you build your scroll-to-top button:

• Where will it be placed?
• How big (or small) should it be?
• What design patterns should you follow so it stays on brand? (Think colors, fonts, icons, etc.)
• Is it at risk of covering important site content, such as information in a sidebar?
• What happens on mobile devices? Will it be responsive?
• Do you actually need it?*

*Note: You could make the argument that users today are conditioned to scroll down (and back up!) on a page, which would eliminate the “need” for a back-to-top button. Our advice: Test it! Add a Google Analytics event on click or use a heatmap tool like Hotjar to see how your site visitors engage with the page.

The best “best practice” to follow is one based on data from your own site and users!

How To Add a Sticky Back-to-Top Button to Your WordPress Site

In this tutorial, we’ll show you how to add a back-to-top button.

Pro-tip: While this tutorial isn’t too advanced, we still recommend trying it out on a staging site or in local environment, so there’s absolutely no risk to your live site. If you need to set one up quick, check out Local, a free local WordPress app that’s incredibly easy to use.

---

Check out this quick video tutorial for adding a sticky back-to-top button!

---

See the Pen ES6 Scroll-to-top button by Josh Lawler (@joshuamasen) on CodePen.

For this sticky back-to-top button tutorial, we’ll use three languages:

• HTML for the markup to create the button
• CSS to style the button and have it match your brand
• JavaScript to make it work and define the behaviors of the button

In the HTML, you’ll find the following lines:

Back to top

This is going to be your sticky back-to-top button! You can see that we’ve added a CSS class called

Back to top

1, and are using some simple JavaScript to make it work. We’re also using an in-line SVG for the button.

Besides an SVG, you could also use an image file or font icon to create the button. We prefer the SVG method, however, because:

1. It won’t get pixelated at different screen sizes, like a raster image would.
2. SVGs are universally supported across browsers. (Yay, user experience!)
3. It’s easy to style with CSS, so you can change everything about it really easily.
4. It only takes one line of code, making it lightweight and better for site performance.

The last really important piece you’ll find in the HTML is this line:

Back to top

This is critical for users operating with screen readers and will improve the accessibility of your WordPress site. (Think of it like an alt tag for an image, but for your scroll-to-top button!)

Now let’s talk more about that CSS class,

Back to top

1. We’re using this to actually style up the button, and it’s where you’ll define qualities such as how big it’ll be, how much padding should be around it, the color, etc.

.top-link { transition: all .25s ease-in-out; position: fixed; bottom: 0; right: 0; display: inline-flex; cursor: pointer; align-items: center; justify-content: center; margin: 0 3em 3em 0; border-radius: 50%; padding: .25em; width: 80px; height: 80px; background-color:

F8F8F8;

Note: We’re using Sass (a stylesheet language), to write our CSS a little bit faster. Learn more about this preprocessor here.

A couple important pieces from this snippet:

Back to top

3; controls how “fast” your button will appear or disappear on the screen, and

Back to top

4; is what makes the button “stick” to the location you want it.

Next, you’ll see rules for

Back to top

5 and

Back to top

6. We’ll use JavaScript to switch between these classes in order to tell the browser when the button should (or shouldn’t) appear on the page.

.show {

visibility: visible;
opacity: 1;

} .hide {

visibility: hidden;
opacity: 0;

}

Before we go into the JavaScript, there are just a few more lines we’ll add to the CSS.

svg { fill:

000;

width: 24px; height: 12px; } &:hover { background-color:

E8E8E8;

svg { fill:

000000;

} }

These classes will stylize the SVG image for the arrow itself and tell the browser how to display the button when a user hovers over it.

Finally, we’ll add some CSS to hide the text that says “back to top” for screen readers.

// Text meant only for screen readers. .screen-reader-text { position: absolute; clip-path: inset(50%); margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; clip: rect(1px, 1px, 1px, 1px); &:focus {

display: block;
top: 5px;
left: 5px;
z-index: 100000; // Above WP toolbar
clip-path: none;
background-color: 

# eee;

padding: 15px 23px 14px;
width: auto;
height: auto;
text-decoration: none;
line-height: normal;
color: 

# 444;

font-size: 1em;
clip: auto !important;

} }

Now on to the JavaScript! We’re going to do this without loading jQuery, which will help keep your code lightweight and quick to load.

The first variable will help the browser find the button.

// Set a variable for our button element. const scrollToTopButton = document.getElementById('js-top');

Next, we’ll create a function that shows the scroll-to-top button if the user scrolls beyond the height of the initial window.

const scrollFunc = () => { // Get the current scroll value let y = window.scrollY; // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it! if (y > 0) {

scrollToTopButton.className = "top-link show";

} else {

scrollToTopButton.className = "top-link hide";

} };

We’ll also add an event listener, which will watch as the user scrolls (so we know where they’re at on the page).

window.addEventListener("scroll", scrollFunc);

Almost done! Next, we need to define the function that makes the button actually take the user back to the top of the page. To do that, we’ll create a variable for the number of pixels we are from the top of the page. If that number is greater than 0, the function will set it back to 0, taking us to the top!

We’ll also add a little animation here, so the jump isn’t too sudden.

const scrollToTop = () => { // Let's set a variable for the number of pixels we are from the top of the document. const c = document.documentElement.scrollTop || document.body.scrollTop; // If that number is greater than 0, we'll scroll back to 0, or the top of the document. // We'll also animate that scroll with requestAnimationFrame: // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame if (c > 0) {

window.requestAnimationFrame(scrollToTop);
// ScrollTo takes an x and a y coordinate.
// Increase the '10' value to get a smoother/slower scroll!
window.scrollTo(0, c - c / 10);

} };

Last but not least, we just need to tell the page to run that function when someone clicks our sticky back-to-top button.

Back to top

0

---

hbspt.forms.create({ portalId: “478844”, formId: “d1d296e8-03b0-4823-8ebe-f09d890382f5” });

---

That’s it! You’ll now have a fully functioning and customizable sticky back-to-top button on your WordPress site.

If you want even better performance from your site, turn to WP Engine and our WordPress-specific hosting services to push your performance to the next level!

How to scrollTo top when a button is clicked in JavaScript?

scrollTo() method is called with the top property set to 0 to scroll to the top of the page. The behavior property is set to 'smooth' to make the scrolling animation smoother. You can replace

my-button with the ID of your button element in the querySelector() method to select your button element.

How do you go to the top in HTML?

We can use HTML to do it..

Scroll To Top.

:root { scroll-behavior: smooth; }.

.

How do I move a button to the top in HTML?

You can use the [code]position[/code] property in CSS to move the button to a specific location on the web page. For example, you can use values like [code]relative[/code], [code]absolute[/code], or [code]fixed[/code] to position the button relative to its normal position or relative to the browser window.

How do I scrollTo the top of a website?

Of course, you can also click and drag the scroll bar on the side of the page, but that's a slow and imprecise option–especially if you're using a laptop touchpad. No, by far the best way to jump to the top or bottom of a Web page is by tapping your Home or End key, respectively.