Back To Top Button ((NEW))

The popularity of responsive web design has led to a proliferation of single-column, long-page designs both on mobile and desktop. A consequence of these designs has been the Back to Top button, which is a shortcut that allows users to quickly navigate to the top of the page.

Back to top button

There are alternative methods for getting people where they need to go. Going back to the top is a means to an end. If you can anticipate what users want and offer it to them, even better. Below are a few ideas:

Navigation at the bottom of the page could satisfy those who want to go back to the top to navigate to or search for something else. This approach works best when users tend to scroll to the very bottom of long pages on your site.

Sticky menus are sometimes a more elegant solution than Back to Top links. If the main purpose of scrolling is to navigate to different topics or sections of the website, having the right menu options available when people need them voids the need to go back up.

The Home button on social sites often brings people to the top of their homepage, which happens to be a page with a long feed and in most need of a quick method to go back to top. Most people on social sites are accustomed to clicking the Home button to scroll to the top of their feed.

Many good solutions exist to help people get back to the top of webpages. Before you decide to implement Back to Top links, consider your use case and determine which approach works best for your audience.

I'm trying to do a back to top button but to scroll down and up to a certain point on the page. For instance you have a long text and you want to bring the user to the next paragraph by simply having them to click on a link... I've done it in the past but I can't remember how I did it for the life of me...

I used a form with a single submit button. Point the "action" attribute to the ID of the element that needs to be navigated to. Worked for me with just "#top" without needing to define an ID in my stylesheet:

When your page is very long you may want to give your users an option to quickly scroll back to the top of the page. In such cases the best solution is to add a button that will appear after the user scrolls a specified number of pixels.

You can specify when the button appears by changing the condition set in the JavaScript code below, document.body.scrollTop for older browsers and document.documentElement.scrollTop for new ones. In the example we've set this to 20 pixels but you may increase this value if you want your button to appear later.

For the sake of the article, I will keep the button as simple as possible but you can use whatever you want (an image, an icon, and so on). All you need is to keep the usage of a combined with href="#".

Our button is fixed at the bottom right of our screen thanks to our "sticky" behavior. Now we need to control that behavior to make the button initially hidden. For this, we will use margin-top with a value equal to the screen height (100vh ).

Oops, the button is messed up! Since we reduced the space of the button to 0, the latter will try to fit that space by adding line breaks. To fix this, we simply add white-space: nowrap to disable the line breaks.

We define our two-column layout where the container-top is the second one. We make the latter a flex container and we place the button at the very bottom using align-items: flex-end. Finally, we use position: sticky to have the button fixed at the bottom right of the screen.

Our second "back to top" button is done! Like the previous one, you can easily control the offset, the fading effect, and the position by adjusting the CSS variables, the bottom property, and the margin-right property.

First of all, we need to hide the button whenever the user opens the site. We also need to make sure that we add this style, separate from the button's base styles, as the button needs to be shown on scroll.

Next, we are adding an event listener to our document that will trigger the callback function on scroll. The scrollTop (MDN Reference) value that we are getting from the respective scrollContainer is nothing but the number of pixels that element has been scrolled from the top.

Here, when that value is higher than our set showOnPx value, that is 100px, we remove the hidden class from our button. If that is not the case, we add the class to the button (especially useful for when the user scrolls up manually).

Create realistic single page experiences with interactive back to top buttons in Adobe XD. In this tutorial, Howard Pinksy shows you how to use anchor links in Adobe XD to create an interactive button that scrolls to the top of the page when clicked -- great for prototyping one page experiences and websites.

The other important note from caniuse data is that you will need to offer it prefixed for the best support. Our demo will fallback to position: fixed which will achieve the main goal just a bit less gracefully.

We also add id="top" to the and use that anchor as the href value for the back to top link. If you only wanted to scroll to the top of you can move the id, or also attach it to an existing id near the top of your page.

The fixed fallback means that browsers that don't support sticky positioning will always show the link. When sticky is supported, the fully desirable effect happens which is the link will not appear until the $scrollLength is passed. With sticky position, once the top of the wrapper is in the viewport, the link is "stuck" and scrolls with the user.

A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when infinite scrolling is used, or on mobile devices where different screen sizes can cause the content to scroll extend.

Now we have a variable called scrollTotal that represents the maximum number of pixels that can be scrolled vertically. By dividing the amount scrolled by the total amount of pixels we can scroll, we get a ratio between 0 and 1. Playing with this ratio, we can easily toggle the button on and off.

For example, we will add a condition that shows the scroll-to-top button when the user has scrolled 80%, (or a ratio of 0.80) down the total height of the page. 80% is an arbitrary number. Basically, the closer we get to 1, the more the user has to scroll before seeing the button.

Nice one, but you can make it nicer by not waiting for the user to scroll to the extreme bottom before the button appears, this would be better for real long pages where the user had had enough rolls on the track to even getting to the middle of the page.

I think we could modify opacity of the button in order to make it visible gradually while we scroll down. Having it set just to appear only when we get closer to the footer seems like we could just put it in the footer (with no JS needed, just a simple link). However, users need to see that such button is available to them, not only after scrolling up to 80% of the page length.

Sometimes you might find yourself in situations in which you have created a rather long post or page and would like to quickly jump right back to the beginning of it without having to scroll all the way back to the top.

The "Jumplink" feature allows you to link your button to a specific element that you have set as your anchor (or target). You, therefore, have to scroll up to the beginning of your page and find the element that you would like to set as your anchor (in this example it will be a text).

An often-overlooked element, the back to top button is a great element to include in your website. Particularly useful for websites that either publish a lot of content or have quite long pages, posts or projects, the back to top button can aid in site navigation and improve the overall user experience of a website.

In the next tutorial, we show you how you can add an interesting drop shadow effect to the back to top button. The drop shadow gives the button a bit of depth and makes it look as if it were floating!

No, currently there is no back-to-top button in the ArcGIS StoryMaps story builder. Although there is no back-to-top button, there are other features to achieve a similar effect. Either one of the workarounds below navigates to the top of the page or a specific section of a story in ArcGIS StoryMaps.

Alternatively, creating in-story links enables the page visitors to efficiently navigate to a specific section in a story. All heading and subheading texts in ArcGIS StoryMaps automatically generate an individual link that can be copied and pasted to create an in-story link. The following are steps to create in-story links by adding a button link in the story.

Click and drag the back to top canvas up near the top of the page. Select the back to top canvas and click on the canvas tab on the right sidebar. Set the canvas's sticky setting to "top on scroll." Next, make sure the stacking order on your arrow is higher than the rest of the canvases so that the arrow is always in view.

When readers get to the bottom of a really long post or page, they often need to get back to the top to use a filter or sorting option, type a keyword into the search bar, or select a new destination from the navigation menu.

WPFront Scroll Top is the highest-rated Back to Top plugin in the WordPress directory. This tool plugin several settings for controlling exactly how the Back to Top button looks and behaves on your site. You can set the size of the button, when it appears on the page, and how long it takes to scroll back to the top of the page once the visitor clicks on the button. You can also hide it on certain screen sizes.

WPFront Scroll Top also offers lots of flexibility for styling the Back to Top button so it suits your website's unique branding. You can set the text, icon, and color manually, or choose one of dozens of pre-styled image buttons from the plugin's settings page. 041b061a72