"Go to Top" function

Report · Jun 04, 2009

Hi,

Iam using RH 7 and the help output is Webhelp. My help pages have mutiple sections and hence users are required to scroll through the sections. I am looking to implement a functionality which has:

1. A link to go to "Top" at the end of every section. When the users click this link they are directed back to the top of the section. OR

2. A link to go to "Top" at the end of every section. When the users click this link they are directed back to the top of the help page.

Iam looking for suggestions on which option would be more practical to implement, and where can I find the code snippet for it.

Thanks much!

Report · Jun 04, 2009

As to links for the top and for other sections, as well...we had been using that type of structure, but found that too many links became overwhelming. We decided to only provide a Return to Top at the bottom of each scrollable topic.

However, I've since revisited the issue, and just yesterday worked up a scrolling (floating) link, which our team is now reviewing. We are considering whether to place this in addition to the current link, or instead of it. (Note the "z-index: 1;" setting in the .css file; that causes the link to always be layered over anything else on the page.)

It looks like this:

This is the code to be used within each topic and within your (MyProject).css file:

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

In your .css style sheet file (place the p.top after the default p & LI.p settings, and the A.topic's after the default A settings)

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

A.topic:link,
A.topic:visited {
     color: #4169e1;
     font-size: 80%;
     font-weight: normal;
     text-decoration: none;
     font-color: 000080;
     padding: 15;
}
A.topic:hover {
     color: #4169e1;
     font-size: 80%;
     font-weight: normal;
     text-decoration: none;
}

Simply customize my settings to suit your organization's style and formatting needs (fonts, location, padding, border, etc.).

Good luck,

Leon

Report · Jun 04, 2009

Thanks Leon. I followed the procedure you have mentioned. The Top link appears on the help page, but it does hover when I scroll down the page. It remains fixed at the position where I placed the <p class="top"><a class="topic" title="Return to Top" href="#">↑ Top</a></p> code. I have copied the p.top and A.topic properties to my CSS.

Am I doing something wrong?

Thanks!

Report · Jun 04, 2009

i all

My own notes...

Personally, I disdain any floating via JavaScript links. (Sorry Leon) While they are cool in that the link is ever present in *generally* the same place, I absolutely HATE that they are herky jerky and always leaping around the page.

Here are my own approaches when I need a Back to Top link. I insert a link that says "Back to top" and program it so the URL is quite simply a pound symbol (US - Hash symbol in the UK and elsewhere) #.

When clicked, the page simply reloads.

As a user, I would find it confusing if the link took me to the beginning of the section. I would typically expect it to take me to the top of the page instead.

Cheers... Rick

Report · Jun 04, 2009

errr...that's what it looks like in the source topic in the project. You should see the floating effect when you generate your WebHelp output.

...or, the .css file you edited is not the one actually assigned to this topic.

...or, you might not have copied everything to the .css file (such as a closing curly bracket, for example).

Rick, there's no herky-jerky, leaping JavaScript here, just very smooth HTML and CSS. Although it might display differently in your HTML Help world; we don't generate that type, so I didn't bother testing for it. Also, please note the href="#" path in the sample code from my previous reply.

Leon

Report · Jun 04, 2009

Heya Leon

Thanks for the heads up. My bad for skimming the thread and not fully reading it so I saw your bit about the #.

Further my bad for not taking the time and testing your script to see it work. It seems that the only time I've ever seen the floating approach used it was herky jerky. So my question here is to ask about something you said. You said it was "smooth" HTML and CSS. Does this mean that the link DOES move with the page as you scroll it, then it "smoothly" glides back to a resting spot? I've seen this approach too. Admittedly it's better than the herky jerky repositioning, but I still find it to be a bit on the annoying side. It would be much better if it were simply positioned and locked to a certain page position.

Then again, I suppose it could also obscure parts of the text if that were the case.

Happy Fri.. errr... Thursday! Rick

Report · Jun 04, 2009

No, Rick, I meant that using CSS and HTML accomplished a smooth look. Yes, JavaScript solutions

The link does not move at all: as your preference states , it is "simply positioned and locked to a certain page position," (bottom right, as shown in my screenshot image). It's only the content that moves, or scrolls, behind it.

Leon

Report · Jun 25, 2009

This is an interesting discussion.. thank you for sharing.

[url=http://pret-auto.org]pret auto[/url]

Adobe Community

"Go to Top" function