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

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

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
4,465,142
Community Members
 
Community Events
176
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!

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.

17 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!

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

@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

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!

마이키 I'm New Here Oct 10, 2022

Thank you. I love it!

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events