How To Create a Scroll Back To Top Button

Prince Damas
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 23, 2018

How can I create a "Back To Top" Button on my page??

Thx for ur help

5 answers

1 accepted

15 votes
Answer accepted
Sattesh M
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
September 14, 2018

Hello Prince, 

We should be able to do this by using the Anchor macro.

Add the macro at the top of the page, and give it a name, like top for example.

Then, at the bottom, or anywhere in the same page, type out the text for the "button", for example, Back to top.

Now highlight the Back to top text, and click on the Insert Link icon, or you can use the Ctrl+K shortcut as well.

In the link pop-up, go to the Advanced tab, and link it to the anchor created above by linking to it using #top.

That should do the trick!
Do let me know if you have any questions.

Cheers,
Sattesh 

Kim Tillett November 14, 2018

Thank you Sattesh!  Your directions worked perfectly.

Like Jeff Tillett likes this
Tobias Anstett _K15t_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 16, 2018

Please note - although this is a valid solution you should consider export scenarios as well... the button/link is considered as content too and will be part of your e.g. PDF.

Like # people like this
Jason Altenbaugh
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
November 24, 2020

Looks like solid steps, but it would seem my current editor is not giving me the option to directly add an Anchor, maybe it's named something different now?

Like # people like this
Julie Chavez February 12, 2021

It appears that they did away with the anchors.  Very frustrated.  Thought using the Header links would work as described in the article below.  They work great in Confluence.  However, we use our confluence pages with Jira. Not only do the header links used as jump links.. not work.. But neither does the Table of contents. Ugggh! Constantly finding a work around with this program.  Also the solution that was written below to add a script.. is only for admins.  I believe we have about 75 employees in our company.. The person who purchased the program is not going to give us all admin access.  This should be a standard user feature.

https://community.atlassian.com/t5/Confluence-questions/Did-the-new-Confluence-update-remove-Anchors/qaq-p/1161043

Like # people like this
Miriam Hopton March 30, 2021

You rock, Sattesh! Your instructions helped PERFECTLY! Thank you.

R S January 19, 2023

Still working in 2023! A floating TOC would be so much nice to have! But until then this will do nicely.

Like # people like this
Jenuel Oras Ganawed
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 9, 2023

What I want floating button something like this. How To Add a Sticky Back-to-Top Button to Your Website

Like # people like this
9 votes
Tobias Anstett _K15t_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 18, 2018

Hello Prince,

Navigate to the Administration ConsoleCustom HTML and edit the At end of the body section. Here you can add custom JS to implement your requirement.

For example you could use

<script>AJS.$('#main-content').after('<div><a onClick="window.scrollTo(0, 0);">Back to top</a></div>');</script>

This will add a Back to top link at the bottom of every page. Modify the inserted html to adapt it to the desired look and feel.

Best, Tobias

1 vote
Erik Lumbela
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
June 2, 2020

Easiest Solution:

You could just create a link with a '#' as url

Confluence (like browsers do) will interpret an empty hash (anchorname) as a pointer to the page itself, thus it will link to the top of the page.

empty-anchor-link-to-top-of-page.png

Kinl Adlez
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
June 16, 2020

It is not quite the same, as with your solution you refresh the page like opening a new link while with the anchor you just navigate to the top again without refreshing the page.

Like Chris Reedy likes this
Erik Lumbela
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
June 16, 2020

it's not the same, but it will do the trick without any scripts

Like # people like this
0 votes
Jenn Williams
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
November 20, 2023

@Sattesh M I am following your directions today and the anchors are not working. When I publish my edits and click on the link, it doesn't take me to the anchor I tied it to. It actually goes nowhere, it's unresponsive. 

Should I talk to our company's Confluence management team? Or is there something I am doing wrong? 

0 votes
Sarah Astle
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 14, 2023

The anchors are great and work well, but I also found that if you want your users to be able to scroll to the top, they can press the <home> key on their Windows device or if they use a Mac they can press <command> and <up arrow>.  My TOC was at the top of each page under an overview section, so this saved me a lot of time updating previously written articles with all of the anchors at the end of each section. Hope this helps someone else!

Sarah Astle
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 14, 2023

Also, for those creating anchors. I also found that you can use unicode text symbols as the text and then use #whatever-you-named-your-anchor is to create the link if you wanted less text clutter on the screen. I had been using 🔝 and then using #TOC for the link.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events