Hide “Back to Top” Links

Hide “Back to Top” Links

Often, web pages will include links at the top of the page which reference paragraphs or sections lower on the page. A recent client’s web page had a list of links at the top of the page. Each link would cause the page to scroll down to that particular section of the web page. The client wanted the user to be able to quickly return to the top of the page, but he did not want “Back to Top” links at the end of each section.

Usually, this type of web page does have “Back to Top” links at the end of each section. For example, click here to jump to the next section of this post.

Next Section
This is the next section. If you clicked on the link above, then you scrolled to this section. This section could have been anywhere on this page.

This is the HTML code used to create the link “click here to jump to the next section of this post”:

<a href="#nextsection">click here to jump to the next section of this post</a>

This code creates a link to a named section called “nextsection”.

The code to create the named section for “Next Section” would look like this:

<a name="nextsection"></a>

Typically, you would create a link at the end of “Next Section” to allow the user to jump back to the top of the web page, like this: Back to Top.

This is the code for creating the “Back to Top” link:

<a href="#">Back to Top</a>

Hiding “Back to Top” Links
However, it is not always aesthetically pleasing to have “Back to Top” links appear throughout your web page at the end of each paragraph or setting. This is especially true if your users want to print your web page. The process below “hides” the “Back to Top” links until a user clicks a link to that section.

For example, this link will take you to a section called “New Section“. However, before you click that link, scroll down to “New Section”, and you will see that there is no “Back to Top” link.

New Section
This is the new section. If you clicked on the link to “New Section” above, you should have jumped to this section. You will also see a “Back to Top” link here:

However, if you scrolled down the page without clicking the “New Section” link above, then you should not see a link for “Back to Top”.

This is the new HTML code used for the “New Section” link:

<a onclick="document.getElementById('newsection_back2top').style.visibility = 'visible';return true"
href="#newsection">New Section</a>

This code sets element “newsection_back2top” (defined below) to be visible when the link “New Section” is clicked.

This is the new HTML code for the “Back to Top” link:

<span id="newsection_back2top" style="visibility: hidden;">
<a onclick="document.getElementById('newsection_back2top').style.visibility = 'hidden';
return true" href="#">Back to Top</a></span>

Floating “Back to Top” Links
There is another option that works well for a web page that has several section with multiple “Back to Top” links. Instead of coding a “Back to Top” link after each section, or even coding a hiding “Back to Top” link after each section, you can create a “Back to Top” link that floats at a particular place on the web page.

For example, click this link for the “Final Section“. This link will cause the page to scroll down to the section labeled “Final Section”, and it will also make a new “Back to Top” element visible.

Final Section
If you clicked the “Final Section” link above, you should now see a floating “Back to Top” link on the left side of the page. Even if you scroll up or down on the web page, the “Back to Top” link will remain in the same position. Click the “Back to Top” link to scroll to the top of the page and to remove that floating “Back to Top” link.

The code for the “Final Section” does not change. However, this is the new code for the “Back to Top” link:

<div id="finalsection_back2top" style="position: fixed; left: 5px; top: 40px; background: #EEE;
visibility: hidden;"><a onclick="document.getElementById('finalsection_back2top').style.visibility = 'hidden';
return true" href="#">Back to Top</a></div>

The addition of fixed positioning along with a location (left, top), causes the “Back to Top” link to “float” in the specified position on the web page.

Leave a Reply