Scroll to top of page

Paul Elbertse · Mon Apr 25, 2016 9:21 am

Goodmorning,

In some topics I would like to have a link that scrolls back to the top of the topic, like the one that is available in the function 'Scroll' (Scroll to Top of Page), Premium pack Responsive skin 3.1.
I know I can use a bookmark to do this but is there another, maybe eaiser, way.

Regards,

Paul

Unread post by **Tim Green** » Mon Apr 25, 2016 10:04 am

Hi Paul,

You can achieve this with a script link using the function that the skin uses itself to perform these scrolls. Open the Link tool, select Script Link and Javascript and then enter this in the entry box:

Code: Select all

javascript:hmpage.$scrollBox.scrollTo(0,600)

You can change the scroll speed by increasing the second number (600 is 0.6 seconds). You can also scroll to a position that is not all the way to the top by increasing the first value to something higher than zero. Note that this will only work in the V3 Responsive skins.

Paul Elbertse · Mon Apr 25, 2016 10:56 am

Tim,

The script is not working.
When I click on the link, a new page is opened with the following text:

[object Object]

Any ideas?

What I did is created a new link in the topic, of type script or macro link;
In the tab script link with HTML java script checked, I entered your tekst.

Regards,
Paul

Unread post by **Tim Green** » Mon Apr 25, 2016 12:11 pm

Hi Paul,

This definitely works, I tested it before mailing it to you. Which skin are you using and where exactly did you insert the link? The skin must be a V3 Responsive skin (not one of the V2 WebHelp/EWriter or CHM skins) and the link must be in the body of the topic.

Paul Elbertse · Mon Apr 25, 2016 12:27 pm

Tim,

I am using the skin: flat_slate_blue, a V3 responsive skin.
I created a link at the bottom of the topic as I would normally do if I want to create a link to another topic.
Then selected the text and choose Link from the menubar.
The rest is as shown in the screenshot in the previous post.

Here is the xml code from the link until the end of the topic:

<para styleclass="Normal"><image src="back-to-top.png" scale="100.00%" styleclass="Image Caption"></image><text styleclass="Normal" translate="true"> </text><link displaytype="text" defaultstyle="false" type="javascript" href="javascript:hmpage.$scrollBox.scrollTo(0,600)" styleclass="Normal" style="font-size:9pt; color:#2a5284;" translate="true">back to top of page</link></para>
</td>
</tr>
</table></para>
<para styleclass="BodyText"></para>
<para styleclass="BodyText"></para>
<para styleclass="BodyText"></para>
</body>
</topic>

The attached screenshot is of the topic with the image and the text.
The Link is only on the text.

I tested with a publish first to a local share server and on a webserver.

Regards,
Paul

Unread post by **Tim Green** » Mon Apr 25, 2016 2:39 pm

Hi Paul,

I'm afraid that just looking at the code doesn't help, because it should be working. Please mail me a small demo project and a copy of the skin you are using and I'll check it. Mail them to support AT ec-software.com (replace the AT with @).

Unread post by **Tim Green** » Mon Apr 25, 2016 4:16 pm

Update:

As so often, it is a bug in Internet Explorer, which is the only place where the problem you describe occurs. It works fine in all real web browsers. The problem is that IE is interpreting this specific piece of JavaScript incorrectly. To get around this problem, you need to use a trick to insert the code in the onclick attribute. Copy and paste this into the script link box:

Code: Select all

javascript:void(0)" onclick="hmpage.$scrollBox.scrollTo(0,600)

Be very careful to paste it exactly as shown. Don't add quotes at the beginning or end, then it will work. In the output the link will then look like this:

Code: Select all

<a href="javascript:void(0)" onclick="hmpage.$scrollBox.scrollTo(0,600)" class="scriptlink" ...

Simon Dismore · Mon Apr 25, 2016 5:10 pm

This is a drive-by "Tips and Tricks" point rather than a reply to Paul. In the case where you aren't using WebHelp 3 and you always want to display the "back to the top" link, you can simply edit your HTML template to put an id before the content and a link after it:

Code: Select all

<body>
<span id="mytop"></span>
<!-- all the usual stuff is here -->
<a href="#mytop"><img src="back-to-top.png">Back to top</a>
</body>

That way you get it on every web page that uses the template, and you don't need to use conditions to exclude it from printed documentation.

Unread post by **Tim Green** » Tue Apr 26, 2016 5:51 am

Hi Simon,

If you replace it with this you will get a smooth scroll to the top instead, and can also adjust the speed and whether it goes all the way to the top or not:

Code: Select all

<body>
<!-- all the usual stuff is here -->
<a href="javascript:void(0)" onclick="hmpage.$scrollBox.scrollTo(0,600)"><img src="back-to-top.png">Back to top</a>
</body>

Simon Dismore · Tue Apr 26, 2016 7:56 am

Tim Green wrote:If you replace it with [hmpage.$scrollBox.scrollTo(0,600)] you will get a smooth scroll to the top instead, and can also adjust the speed and whether it goes all the way to the top or not.

I'm not saying that isn't a good feature, but I thought hmpage was defined in hm_webhelp.js, so it wouldn't exist unless you were publishing to Webhelp 3?

Paul Elbertse · Tue Apr 26, 2016 9:41 am

Tim,

It works great, thanks for your help.

I also noticed the reply by Simon.
For now I will not need to have a link on every page but I really would like to know how to do this, because I think I will like it.

So I tried to understand how this works but I guess I just do not have the knowledge.

I always use a template (I have several templates) when creating a new topic.
Would I need to enter the code in the xml of the template before the </body>?
But I am sure I need either a picture or text where the code refers to, right?

Maybe you or Simon could tell me (step by step) how to achive this.
Or, do you have a template I can use?

But, as said, I do not need it right now, so there is no rush.

Regards,
Paul

Martin Wynne · Tue Apr 26, 2016 11:26 am

Hi Paul,

This isn't a direct answer to your question, but is maybe relevant.

Many users don't seem to realise that you can jump back to the top of any web page by pressing the Home key on the keyboard. This works from anywhere on the page and doesn't need the finding of a specific link to click on. Maybe a note about this would be worth adding at the bottom of long pages.

Likewise the End key jumps you to the bottom of any page.

If caret browsing has been turned on (F7), it's Ctrl+Home and Ctrl+End, but those who use F7 will know about that.

regards,

Martin.

Paul Elbertse · Tue Apr 26, 2016 1:10 pm

Hi Martin,

You are absolutely right.
Many users don't know or realise this and this is the reason for the link on large pages.

Actually its a good idea to mention this on pages that are quite long.

Thanks for the tip.

Regards,
Paul

Simon Dismore · Tue Apr 26, 2016 4:10 pm

Martin Wynne wrote:you can jump back to the top of any web page by pressing the Home key... Maybe a note about this would be worth adding at the bottom of long pages.

Excellent point. It might make sense to use the Home key as the graphic, so that users learn the connection. For example:

home-key-with-back-to-top.png

Code: Select all

HTML
<a href="#mytop"><span class="keyboard-key">Home</span>Back to top</a>

CSS
.keyboard-key {
/*  style adapted from https://en.wikipedia.org/wiki/Home_key  */
    border: 1px solid #aaa;
    -moz-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -moz-box-shadow: 0.1rem 0.2rem 0.2rem #ddd;
    -webkit-box-shadow: 0.1rem 0.2rem 0.2rem #ddd;
    box-shadow: 0.1rem 0.2rem 0.2rem #ddd;
    background-color: #f9f9f9;
    background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
    background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
    padding: 0.1rem 0.5rem 0.3rem 0.4rem;
    margin-left: 5px;
    margin-right: 0.5rem;
    font-family: inherit;
    font-size: 0.6rem;
}

Martin Wynne · Unread post by **Martin Wynne** » Tue Apr 26, 2016 4:42 pm

Simon Dismore wrote:Excellent point. It might make sense to use the Home key as the graphic, so that users learn the connection.

Hi Simon,

That's a good idea. There is also a convention (or at least, there is here

), to use a monospace "typewriter" font (Courier New) when referencing keyboard keys to differentiate them from references to on-screen buttons and text:

home_key.png

regards,

Martin.

Help & Manual Forums

Scroll to top of page

Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page

Re: Scroll to top of page