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!
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.
Davin Studer
Business Intelligence Engineer
Vancouver, WA
480 accepted answers
19 comments