How to Add an Arrow Button to Scroll to the Top of the Page in Confluence?

[peyman khazaeli]

Hi Community,

I would like to add an arrow (or button) to my Confluence page so that when users click on it, the page scrolls back to the top.

Is there a built-in feature for this in Confluence, or do I need to use custom CSS HTML JavaScript? If yes, could you please share an example of how to implement it?

Thank you in advance for your help!

[Staffan Redelius]

Hi @peyman khazaeli and welcome to the community!

I think the easiest way to do this is to use a text anchor

1. Copy the link to the first heading on your page (when the page is published).
2. Open up the page in Edit mode
3. Write a text anywhere on the page i.e <Top of page> mark the text and click on "Link" in the tools menu and add #<your heading link>

Let me know if this helps!

Best regards,
/Staffan

[peyman khazaeli]

Hi Staffan

Thank you for the suggestion! That makes sense. In addition, we would like to add an arrow in the corner of the page that can move with scroll and visitors can always click to quickly scroll back to the top.

Best regards,
Peiman

[Staffan Redelius]

I don't think it is possible out of the box to have a floating link on the page.

Another thing worth mentioning  I just tried this out myself and realized you don't need to use # if you paste the link to the heading. That is only if you use the text anchor macro on the page (not using the  heading link).

I added a Emoji at the end of the text, it might not be the prettiest but a "quick and dirty" solution 😂

[peyman khazaeli]

Thank you, I'll try. 

[Anwesha Pan (TCS)]

Hi @peyman khazaeli 

You should be able to do the floating back to top on the page by using a User macro.

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:

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

You can refer this article for the details.

To get access to the User macro, you can follow the instructions at the Confluence User Macro guide.

This should do the trick! ✨

Thanks,
Anwesha