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,096
Community Members
 
Community Events
176
Community Groups

Floating Button on Confluence Pages

This seems to have been asked a few times in these pages, but I haven't found a solution that worked for me. I have editing rights in some of the spaces on Confluence and write content here (mostly procedure manuals). I am looking for a floating button macro (or a workaround) so that the Table of Contacts can be accessed from anywhere within the Confluence article since these procedure manuals tend to be quite long. I am not a superadmin and have no coding background. Appreciate ideas!

1 answer

1 accepted

2 votes
Answer accepted

Hi Rukshana,

It sounds like you're trying to create a "sticky" element.  Here's how I was able to do that in Confluence Server:

  1. I added a Div macro and set the ID to "sticktotop".  Inside that Div macro I set a Table of Contents macro embedded within a Panel.
  2. I added a CSS Stylesheet macro to dictate the properties of the Div macro.  It contains the code below.  The z-index value is set high to ensure it stays on top of all other elements.
#sticktotop {
position: sticky;
z-index: 100;
top: 0;
}

I believe both of these macros are included in Cloud.  Hopefully this will work for you.

Good luck!

@Jared Brenner thanks so much! Since I have zero clue about CSS/HTML, it took me a while to figure out what you meant. But after fiddling around with it for a while on w3schools, I got it. I used the below for my purpose:

Placed a Div macro after the 'Table of Contents' ends. Within the Div macro I used the CSS Style:

position: sticky; height: 50px; padding: 12.5px; box-sizing: border-box; background-color: rgba(176,224,230,0.9); z-index: 100; top: 0

I wrote the text "Go back to Table of Contents" within the panel of the Div macro and linked it to an anchor near the ToC. It works beautifully! Learned something today! Thanks so much!!! :D

Like # people like this

That's great!  I'm glad you were able to implement it.  If you could mark the question as Solved that'll help other users looking for information about this.

Like # people like this

Is there a solution for Confluence Cloud? 

I would very much like to know.

Like # people like this

Interesting, how to do that on Server side :)

Is there a way to do this in confluence cloud since cloud doesn't allow CSS anymore. (For any developers at confluence FOR THE LOVE OF GOD PLEASE BRING BACK CSS. Thank you)

Like # people like this

@Addie Hutchins : Have you found out anything? It´s really frustrating not be able to have a floating button. :(

Hi @Sebastian Zander

please look at my comment under Jared Brenner above. I used his solution and it worked :) Good luck!

Hi @rukshana_akhter

Is this possible with Confluence Cloud?

Suggest an answer

Log in or Sign up to answer
TAGS

Atlassian Community Events