Adding a link to the top of each topic

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Dennetti
Propeller Head
Posts: 50
Joined: Fri Sep 21, 2018 1:42 am

Adding a link to the top of each topic

Post by Dennetti »

I need to add a link to each topic that goes to the top of the topic. I have done this on the master page, but the link is is permanently at the bottom of the page. Can I change this so it is always displayed in long topics, regardless of whether you have scrolled to the bottom of the topic.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Adding a link to the top of each topic

Post by Psider »

Have a look at position:fixed and position: sticky.
https://developer.mozilla.org/en-US/doc ... S/position

position:fixed should have broader browser support and is probably easier to implement. position:sticky took me a while to get my head around - it's relative to where the element is on the page (I think, my brain exploded). If you target IE11, you definitely can't use sticky.

So for fixed try something like this (gross colours so you can see what's going on):
p.fixed {
position: fixed;
bottom: 1px;
right:10px;
background-color: white;
border: 1px solid limegreen;
}

For sticky, something like this assuming your element is at the bottom of the page, not the top:
p.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 1px;
left:90%;
border: 1px solid lightpink;
background-color: white;
width: 10em;
}
Dennetti
Propeller Head
Posts: 50
Joined: Fri Sep 21, 2018 1:42 am

Re: Adding a link to the top of each topic

Post by Dennetti »

Hi. Thanks very much for your post. It was really useful. I added the "position:fixed" code to CSS as a paragraph style. I then associated this style with the relevant paragraph on the master page, for the button. The fix works perfectly.
Post Reply