Back to top

Jim_Mount

Apologies if this has been posted before.

Is there a way to create a floating "stickied" back-to-top image link on Obsidian Portal? The tutorials I've seen on-line all seem to require Java in the CSS, which apparently isn't allowed. Any tips would be appreciated. THanks in advance!

cgregory

Do you mean an image with the fixed position style?

position:fixed;

 

Is this what you are trying for?

https://deusex.obsidianportal.com/wikis/home-page

cgregory

I realized that maybe you meant the click to top part also, in which case the #top anchor will work

<a href="#top">Back to top of page</a>

And just combine it with the fixed position image.

Jim_Mount

Yes? Kinda? Something like this

Am I just being picky?

cgregory

Ok, that's sort of doable, if we cheat.

Lets see. You still use fixed position (that gives you the float) and #top (to give the jump) but start off the button transparent and give it a timer before it becomes visible. Say a timer that would be long enough for the user to have read a fair bit.

the issue might be figuring out how far down the screen to show the image, since you could have multiple resolutions.

Jim_Mount

Well, I am thinking that getting my "back-to-top" button to fade in after scrolling the page is impossible without Java. But I'm happy I at least sussed out how to fix it in place (relative to viewport), because for the longest time I couldn't get it to position in the bottom right. No matter what coordinates I used, it kept appearing in the top left, right over the ObPortal navigation bar, rendering the bar unclickable.

After some searching for a solution, I thought it was a container issue, so I found I could frame the link button like so on the page it was used on (I placed it at the bottom just to find it easy):

<div class="fixedContainer"><a href="#top">YOUR IMAGE LINK OR TEXT HERE</a></div>

and I used this code in my CSS:

/*POSITION FIXED*/
.fixedContainer {
    position: fixed;
    padding: 2em;
    right: 1%;
    bottom: 1%;
    transform: translate(-1%, -1%);
}

And it probably looks old school but I think it's pretty neat :)

Keryth987

OK, so stealing this for Shadows and my other sites.

Waitr. Does that non CSS code need to go on every page?

Jim_Mount

Yeah, but you might only need it on long pages. Glad I could help!