Going back to specific scroll point of the scene

Hello Hype,
I built a website by only using Hype without any programming knowledge, and I have a question for clicking the back button on the browser:

When previewing, the back button on browser works, thanks to this post: http://forums.tumult.com/t/linking-to-a-specific-scene-from-inside-and-outside-of-a-tumult-hype-document/1103 and I have a “scroll to top” javascript found in this forum for “On Layout Unload” of my scene ( window.scrollTo(0,0); ) because when previewing, the scene didn’t show the top when it loads.

But now when I hit the back button in the browser, it shows the top of the scene every time it loads the previous scene… Can I make it show where I left off on my previous scene instead of showing to the top of every previous scene?

Thanks,
William

If you have that scrollTo script, your scene will always start at the top. If you want to change that, you could read the current scroll position when exiting a scene by looking at this value ‘On Scene Unload’:

var scenePosition = document.documentElement.scrollTop || document.body.scrollTop

You can then read that value again ‘On Scene Load’ to jump to that point if the value exists.

Should I put that script you gave me to a new Javascript Function? I’ve tried it but it doesn’t work… Now that when I click Contact Us on my Home page, it shows the bottom of the Contact Us page… And when I click the back button on my browser, it shows in the middle of my home page, like before… (I have a tall home page of 5300px)

Hello Daniel,

I don’t understand your answer, do you mind elaborate it?
Where should I put that line of code?

Thanks,
William

Here’s a sample document which has a scene unload and a scene load script to track scene positions.

scrollposition 2.zip (86.9 KB)

This technique will work if you don’t leave the page where your Tumult Hype document is rendered. To store this setting across page reloads, you’ll need to use local storage. Here’s a good jQuery plugin for getting and setting values.

In the head we run this:

<script type="text/javascript">	
window.scrollPositionsByScene = {};
</script>

To set that variable as a dictionary to store values for any scene we wish to store the scrolled-to value for.

We then run this ‘On Scene Load’. If there’s no value for scenePosition, nothing will happen.

// get the position
var scenePosition = window.scrollPositionsByScene[hypeDocument.currentSceneName()];
window.scrollTo(0, scenePosition);

And this runs ‘On Scene Unload’ to remember the last scrolled-to value for the scene:

// set the position 
var scenePosition = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollPositionsByScene[hypeDocument.currentSceneName()] = scenePosition;

Thanks to @jonathan are in order for the technique.

3 Likes

Thanks for your reply, but I have this toTop code window.scrollTo(0,0); on the first scene loads, and unload on every other scenes. It conflicts when I have this code loaded… The webpage doesn’t remember where it left off…

Good morning,

I used these scripts but in my case they don’t work on a flexible layout, just on a fixed one. There’s another solution that I could use?

Thank you

Mauro

I assume you mean where you have different Responsive Layouts? In Hype v3.6 we added an API to get the layout name, so you could use this in addition to the scene name for a key.

The new On Scene Load code would look like:

// get the position
var scenePosition = window.scrollPositionsByScene[hypeDocument.currentSceneName() + hypeDocument.currentLayoutName()];
window.scrollTo(0, scenePosition);

And the On Scene Unload code would look like:

// set the position 
var scenePosition = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollPositionsByScene[hypeDocument.currentSceneName() + hypeDocument.currentLayoutName()] = scenePosition;
1 Like

Hi Jonathan,

thank you for your support. I have just one responsive layout at the moment. If I change my main scene from responsive to fixed this script works… but it doesn’t in responsive mode. Can I send to you my wip project with a private message? Maybe you can help me easily…

Thank you

Mauro

I solved my problem making the layout height the same as the group with the scroll bar.

Glad you got it – yeah if the height is set to 100% for the scene that effectively means there’s no scroll for the document, hence trying to change the scroll won’t work!

Another technique is to use the scrollTop setting instead of on the body to do so on the element that has the overflow.

(and you’re always welcome to shoot over a document if you need further help)