Adding a link to the top of each topic
Adding a link to the top of each topic
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.
Re: Adding a link to the top of each topic
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;
}
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;
}
Re: Adding a link to the top of each topic
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.