0 votes
by (310 points)
Hi, I'm using Harlowe 2.1.0 and am curious about how to make a link that jumps to the top of the current page.

Adding an anchor <a href="#top"> doesn't quite work because it doesn't scroll to the *very* top of the page, only to the highest point I can place an element with an ID.

Any ideas?

3 Answers

+1 vote
by (159k points)
selected by
 
Best answer

Try the following instead.

<tw-link onclick="window.scrollTo(0,0)" tabindex="0">back to top</tw-link>

or

<tw-link onclick="window.scroll(0,0)" tabindex="0">back to top</tw-link>

 

by (310 points)
Thanks both! The only reason I think that these don't work for me is because of how I have my story formatted - the outside page is always fully scrolled up, and the scrolling only happens within the tw-passage element.

Do you know if there's any way to give the tw-passage element an id, so I can navigate to it with a # link?

No worries if this is a bit obscure, think I can figure it out from here :)
+1 vote
by (63.1k points)

Try something like: 

<tw-link onclick="scroll(0, 0)" tabindex="0">back to top</tw-link>

 

by (310 points)
Hi, for me this does not work :(, it creates a link that when I click it, nothing happens. Does it only work on certain browsers?
by (159k points)
Chapel forgot to implicitly state which element to scroll to the top of.
by (63.1k points)
Thanks greyelf.
0 votes
by (63.1k points)

the outside page is always fully scrolled up, and the scrolling only happens within the tw-passage element 

That's pretty important info.  Here's some code to  place in Story JavaScript.

$(document).on('click', '#to-top tw-link', function () {
    $('tw-passage').scrollTop(0);
});

To use it in passage:

<span id='to-top'>(link-repeat: 'Return to top.')[]</span>

 

...