Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

A User Macro for a Floating Scroll to Top Button

I like reading documentation that is short and concise. But you know what, sometimes (lot's of times) long documentation happens. It's a sad fact about the world we live in.

I was approached the other day by one of my users who said that she would like to have some way to quickly get back to the top of a document. Their team has quite a few documents that are really long. My first response to her was to suggest a named anchor at the top of the page and "Back to Top" links interspersed throughout the page. Her response was "Yeah, I thought about that but that's kinda ugly and there are all these links interrupting the documentation. Is there any way to have something that just floats on the page to quickly take you back to the top."

I certainly didn't want to do anything that would be site-wide as it might be a bit overkill, but for those REALLY long pages it might be handy to have something for this. Hence the Scroll to Top user macro was born. You can place the macro anywhere on the page ... I would typically just put it at the top. If you scroll down a bit a scroll-to-top button will appear in the bottom right of the screen and float there till you scroll back to the top. That's it. It's simple but effective. This will only work in the self-hosted Confluence products as Confluence Cloud doesn't have user macros. Enjoy!


User Macro Code

Macro Name:

Macro Title:
Scroll To Top

This will display a floating scroll-to-top button in the lower right corner of the screen.

Macro Body Processing:
No macro body


## Developed by: Davin Studer
## Date created: 10/17/2018
## @noparams

<script type="text/javascript">
    //If the scroll button doesn't exist add it and set up the listeners
    if(AJS.$('#scroll-top').length == 0) {
        AJS.$('#main-content').prepend('<button id="scroll-top" class="aui-button aui-button-primary scroll-top-button" style="display: none; position: fixed; bottom: 10px; right: 10px; z-index: 10;"><span class="aui-icon aui-icon-small aui-iconfont-chevron-up">Back to Top</span></button>');

        //Check to see if the window is top if not then display button
            if (AJS.$(this).scrollTop() > 100) {
            } else {
        //Click event to scroll to top
            AJS.$('html, body').animate({scrollTop : 0}, 500);
            return false;


4/16/2020 - Removed the style block as it causes the Confluence header to no longer float at the top for some reason.


I realize this is a workaround, but Control+PageUp works  :) 

Bill Bailey Community Leader Oct 19, 2018

Your users have never heard of child pages? ;-)

Thanks for putting this together!

Like Gonchik Tsymzhitov likes this

Nifty macro! I have a long policy doc with a TOC at top of page and this is perfect to get back to the TOC.

One thing though: with Confluence 6.x and RefinedTheme the button positions itself outside the content area just to the right of the create icon. Any ideas on how to move it left? See example below.

Screen Shot 2018-10-26 at 3.16.01 PM.png

The position is defined by the below code. Just change the bottom and right values to put it where you want.

    .scroll-top-button {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 10;


@Davin Studer Thanks for this wonderful user macro :) - gonna try it as soon as possible.

That's exactly what I was looking for but had no idea how to start.

its perfect, thank you!

Like Davin Studer likes this

Very nice, and converts to a ScriptRunner macro easily enough:)

Hey there, how do I insert this said macro into my page?
Does it require higher admin rights? I don't see it in my choices of macros or am probably missing something. Thanks much!

Hi @Kris Lacson - you need admin rights for your Confluence System. 

See documentation here for writing a confluence plugin (which @Davin Studer already did for us - thanks again) 

Like Kris Lacson likes this

@Davin Studer I've been using this macro for awhile now, and I only just noticed that it is causing the Confluence header toolbar to disappear after you scroll down the page, and I can't figure out what in the code is causing that.

@Mario Polito Yeah, I ran into that issue with another user macro I created. For some reason having a style block in the page causes the header to not float. I've edited the above code to remove the style element. This is also true if for instance you use the html macro and put a style block in it. If there is a style block in the page on load the header will not float.

Like # people like this

Thank you!

Like Davin Studer likes this

Very nice and works great on those looooong pages.

Like Davin Studer likes this

Thank you, your macro helped us a lot.

Like Davin Studer likes this

Great macro.  Thanks for sharing, Davin!


Log in or Sign up to comment
Community showcase
Published in Confluence

Confluence: Where work and wellness meet

Feeling overwhelmed by the demands of work and life? With a 25% increase in the prevalence of anxiety and depression worldwide during the pandemic, for most of us, it’s a resounding yes . 🙋‍♀️ ...

753 views 5 21
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you