A User Macro for a Floating Scroll to Top Button

[#1]

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:
scroll_to_top

Macro Title:
Scroll To Top

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

Macro Body Processing:
No macro body

Template:

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

<script type="text/javascript">
//<![CDATA[
AJS.toInit(function(){
    //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
        AJS.$(window).scroll(function(){
            if (AJS.$(this).scrollTop() > 100) {
                AJS.$('#scroll-top').fadeIn();
            } else {
                AJS.$('#scroll-top').fadeOut();
            }
        });
    
        //Click event to scroll to top
        AJS.$('#scroll-top').click(function(){
            AJS.$('html, body').animate({scrollTop : 0}, 500);
            return false;
        });
    }
});
//]]>
</script>

Update:

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

[Bill Rudy]

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

[Bill Bailey]

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

Thanks for putting this together!

[Bruce Reed]

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.

[Davin Studer]

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;
    }

[Fabienne Gerhard]

@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.

[Sergey Subbotin]

its perfect, thank you!

[Davin Studer]

@Sergey Subbotin You are most welcome.

[CJ Edwards]

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

[Kris Lacson]

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!

[Fabienne Gerhard]

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) 

[Mario Polito]

@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.

[Davin Studer]

@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.

[Gonchik Tsymzhitov]

Thank you!

[Michael Woffenden]

Very nice and works great on those looooong pages.

[Наталия Крюкова]

Thank you, your macro helped us a lot.

[Pam Weber]

Great macro.  Thanks for sharing, Davin!

[CDRAGON]

Thank you. I love it!

[Ebru A_]

Hi,

I'm new here.

Where should I put this code? 

Can you please help.

Thank you

[Michael Woffenden]

Ebru, you may follow the instructions at the Confluence User Macro guide.