0 votes
asked by (220 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
answered by (125k 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>

 

commented by (220 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
answered by (58k points)

Try something like: 

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

 

commented by (220 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?
commented by (125k points)
Chapel forgot to implicitly state which element to scroll to the top of.
commented by (58k points)
Thanks greyelf.
0 votes
answered by (58k 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>

 

...