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!

ScrollTopCurl.png

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.

19 comments

Bill Rudy October 18, 2018

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

Like # people like this
Bill Bailey
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.
October 19, 2018

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

Thanks for putting this together!

Like Gonchik Tsymzhitov likes this
Bruce Reed October 26, 2018

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

Davin Studer
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.
October 26, 2018

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
December 3, 2018

@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 September 19, 2019

its perfect, thank you!

Like Davin Studer likes this
Davin Studer
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 19, 2019

@Sergey Subbotin You are most welcome.

CJ Edwards February 10, 2020

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

Kris Lacson March 24, 2020

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
March 24, 2020

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
Mario Polito April 16, 2020

@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
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.
April 16, 2020

@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
Gonchik Tsymzhitov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 2, 2021

Thank you!

Like Davin Studer likes this
Michael Woffenden
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.
January 9, 2021

Very nice and works great on those looooong pages.

Like Davin Studer likes this
Наталия Крюкова June 16, 2021

Thank you, your macro helped us a lot.

Like Davin Studer likes this
Pam Weber January 12, 2022

Great macro.  Thanks for sharing, Davin!

마이키 October 10, 2022

Thank you. I love it!

Ebru A_ July 19, 2023

Hi,

I'm new here.

Where should I put this code? 

Can you please help.

Thank you

Michael Woffenden
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.
July 19, 2023

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

Like Ebru A_ likes this

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events