Skip to main content
A
Anonymous
February 3, 2011
Question

RH9 HTML - a back-to-top button for long topics

  • February 3, 2011
  • 1 reply
  • 4347 views

Is it possible for Robohelp to automatically generate a back to top of page button whenever I create a long topic?

This topic has been closed for replies.

1 reply

RoboColum_n_
RoboColum_n_
Legend
February 4, 2011

You could handle this by use of a master page. This could be setup with a bookmark (e.g. called "top") and a hyperlink at the bottom linked to it. If both the bookmark and the link were part of the master page body, this would do exactly what you want. Then you just need to assign the master page to the required topics.

  The RoboColum(n)   @robocolumn   Colum McAndrew
A
Anonymous
February 4, 2011

I use this code:

<p class="top"><a class="topic" title="Return to Top" href="#">↑ Top</a></p>

Paste it at the bottom of the HTML page before thelast body tag.

The ↑ Top remains visible at all time.

Jac

MergeThis
MergeThis
Inspiring
February 4, 2011

It is, if you've placed it in the footer of the Master page, right?

Good luck,

Leon


BTW, if you'd like a floating Top "button" (which always floats on the screen no matter where the topic is, vertically), check out the following.

At the top of each topic (I have it just under the H1 heading):

<p class="top"><a class="topic" title="Return to Top" href="#">↑ Top</a></p>

It will look strange in Design mode, but not in Preview or the output.

In your .css style sheet file (place the p.top after the default p & LI.p settings, and the A.topics after the default A settings). Note: The z-index: 1; is a layering control to ensure that the element always appears "in front."

p.top {
position: fixed;
background-color: #d8e4f8;
border: 2px solid #b0c4de;
padding: 2px;
right: 12px;
bottom: 5px;
z-index: 1;
}


A.topic:link,
A.topic:visited {
color: #0000CD;
font-family: Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
font-color: 000080;
padding: 15;
text-decoration: none;
}
A.topic:hover {
color: #000080;
font-size: 80%;
font-weight: normal;
text-decoration: none;
}

Obviously, you can customize this for fonts, colors, padding, etc., based on your design needs.

Good luck,

Leon

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices