How to jump/scroll to top of page?

Question

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?

Answer 1

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>

 

Comments

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 :)

Answer 2

Try something like: 

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

 

Comments

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?

---

Chapel forgot to implicitly state which element to scroll to the top of.

---

Thanks greyelf.

Answer 3

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>