Menu should not jump in a new scene

1

Hello everyone,

I built a menu that is linking a hundred phrases to a hundred scenes and want it not to jump back to the top in every new scene. Is this possible and if yes, how.

that´s what i mean

thx for any help in advance.

2

Wenn du in deinen Tumult Hype Projekten ein permanentes Symbol verwendest, um ein Menü von Szene zu Szene zu bewegen, bist du sicherlich schon auf das Problem gestoßen, dass die Scroll-Position des Menüs bei jedem Szenenwechsel zurückgesetzt wird. Dies kann besonders bei langen Menülisten zu einer frustrierenden Benutzererfahrung führen, da die Nutzer ihre Position im Menü verlieren.

Glücklicherweise gibt es eine einfache Lösung, um dieses Problem zu beheben: Mit ein wenig JavaScript kannst du die Scroll-Position des Menü-Containers speichern und beim Wechseln der Szene wiederherstellen. Dies sorgt für eine nahtlose und benutzerfreundliche Navigation in deinem Projekt.

Im Folgenden findest du ein Skript, das genau das tut. Du musst lediglich sicherstellen, dass du die ID deines Menü-Containers entsprechend anpasst (menuWrapper). Dieser Code wird dafür sorgen, dass die Scroll-Position deines Menüs über Szenenwechsel hinweg beibehalten wird:

Head HTML:

	<script>
	/*!
	 * MaintainScrollPosition in Tumult Hype
	 * Copyright (2024) Max Ziebell, MIT-license
	 */
	(function () {
	    var menuElementId = 'menuWrapper';
	    var lastScrollPosition = 0;
	
	    // Hype Scene Unload handler
	    function HypeSceneUnload(hypeDocument, element, event) {
	        var menuElement = hypeDocument.getElementById(menuElementId);
	        if (menuElement) lastScrollPosition = menuElement.scrollTop;
		}
	
	    // Hype Scene Load handler
	    function HypeSceneLoad(hypeDocument, element, event) {
	        var menuElement = hypeDocument.getElementById(menuElementId);
	        if (menuElement) menuElement.scrollTop = lastScrollPosition;
		}
	
	    // Register event listeners
	    if ("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
	    window.HYPE_eventListeners.push({"type": "HypeSceneUnload", "callback": HypeSceneUnload});
	    window.HYPE_eventListeners.push({"type": "HypeSceneLoad", "callback": HypeSceneLoad});
	})();
	</script>
3 Likes
3

Hi Max,

vielen lieben Dank für die Mühe und das Skript.
Es funktioniert super.

Viele Grüße,
Volker

1 Like