How to jump/scroll to top of page?

0 votes
asked Mar 13 by lilymc (170 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 Mar 14 by greyelf (88,790 points)
selected Mar 15 by lilymc
 
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 Mar 15 by lilymc (170 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 Mar 14 by Chapel (46,530 points)

Try something like: 

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

 

commented Mar 14 by lilymc (170 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 Mar 14 by greyelf (88,790 points)
Chapel forgot to implicitly state which element to scroll to the top of.
commented Mar 16 by Chapel (46,530 points)
Thanks greyelf.
0 votes
answered Mar 16 by Chapel (46,530 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>

 

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...