How do I create a back-to-top button with Flare css?

[Mari0n]

My topics are getting a bit long and it would be nice to provide a "back-to-top" button to hover at the bottom right hand side of the window.

Trying to look it up on internet and finding results, but as I am not a programmer, I'm still not sure what to do.
Can I achieve what I want with Flare css? I have v10.2.2
I can get a text link to work in the footer, but that will only be any good when the reader has reached the bottom of the topic.
Help appreciated

[NorthEast]

Use position: fixed, e.g.:

Code: Select all

p.yourstyle
{
     position:fixed;
     bottom:0;
     right:0;
     z-index: 99;
}

See: http://www.w3schools.com/cssref/pr_class_position.asp

[Mari0n]

Hi Dave,
Thanks! That really set me on the right path!

And for anyone else who might want to try this:

In the MasterWebPage that I use for creating chm output:
1) Made a paragraph between the bodyproxy and the footer of the page and entered the following statement in Text editor mode: <a href= "#top"> text </a>
This is recognised by browsers to go to top of page!

2) Then created p.top style (as suggested by Dave!! Thank you!!) with following properties:
o Position: fixed
o Bottom: 0
o Right: 1% (makes it appear neatly on the right hand side)
o Top: 90% (makes it appear 95% from the top of the pane)
o Z-index: 99 (no idea what this does)
o Background image: CircleBackground (I created a circle image for this purpose)
o Background repeat: norepeat
o Padding 10px / Padding left 5px

3) Applied p.top to the paragraph and then did some inline formatting to get "Top" to appear bold and withou underlines and conditioned the whole paragraph for Online only.

Hope it helps somebody out there......

[ChoccieMuffin]

That's very neat!

(You could probably have included the bold formatting in the style for p.top.)

[NorthEast]

o Z-index: 99 (no idea what this does)

The z-index is the layer, so setting it to a high number means it sits on top of the other stuff on your page.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

[awojcicki]

This was super helpful- thank you! I used this for a "Contact Support" button that's fixed at the bottom of each topic page.