Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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.

12 comments

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!

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
Davin Studer Community Leader Sep 19, 2019

@Sergey Subbotin You are most welcome.

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

Comment

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

Table Row Highlighter - CSS Hack

(Said in an infomercial voice) Has this ever happened to you? You are on a Zoom/Teams call, looking at a large table, and people are confused where on the table you are pointing (insert video of real...

272 views 0 3
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