Load Page at TOP of page

Authoring Twine
1

I’m writing with Twine’s Snowman 2.0.2. When I test the game there’s something that bothers me. When I click the link to go to the next page, the page does not load at the TOP of the page, but loads somewhere in the middle. How do i get pages to automatically open so that the top of the page is visible first, and you don’t have to scroll up? I’m trying to figure out the javascript. It’s frustrating because when people play the game, they may not realize that there’s content that the would have to scroll UP for, and might miss something.

2

One solution is to call the JavaScript window.scrollTo() function each time a Passage is shown, you can do this by using the jQuery on() function to attach an event handle to the Snowman sm.passage.showing Passage event.

Such event monitoring code would be placed within your Twine 2. project’s Story JavaScript area (or within a script tagged Passage if your project is TWEE Notation based.)

$(document).on('sm.passage.showing', function() { window.scrollTo(0,0); });

If you want a ‘scrolling’ effect you could use the ScrollToOptions feature of scrollTo() like so…

$(document).on('sm.passage.showing', function() {
	window.scrollTo({
		left: 0,
		top: 0,
		behavior: 'smooth'
  	});
});

Another option is the jQuery scrollTop() function…

$(document).on('sm.passage.showing', function() { $(window).scrollTop(0); });
3

THANK YOU! It works exactly how I want it to now.