Auto-Scroll to next anchor on Mouse-wheel movement

How I have designed my website so far, being one large scrolling page means it wouldn’t be so suitable to go along the lines of Jonathans example.

This link here: http://www.thepetedesign.com/demos/onepage_scroll_demo.html is exactly what thought would work within my existing project, as it is one long webpage which scrolls up or down based on the mouse input to the nearest anchor / element.

There are two versions j query and a Js version so I wondered / hoped if this would be something that would be worked within a hype project.

Thanks again.

Hi Ollie!

Based on your link to the "Pet Design" site another approach might be to use Scenes as your anchor. Functionally I think this concept would be equivalent to what you are after - with the benefit that scenes allow for tidier project (element) management... and You are still using a single page.

At the bottom of this post is the thread where I got the original project demo - I have made a few adjustments to it in the Hype project just below:

scrollingScenes_JHS.hype.zip (19.0 KB)

Note this is a demo of what I think You would find useful - You no doubt will need to do your own customizing.

Compared to the "original" found in the thread link at the bottom of this post I have:


1) Removed the jQuery Library as it did not appear to be necessary.

2) Removed the scroll bar from the entire HTML page - this can be put back in by commenting out (or removing) the CSS in the HTML Head. Note that this scroll bar could be useful, depending on your design, as it allows scrolling only in the current Scene.

3) Added some arbitrary graphic rectangles in the "First" Scene to show the use of a flexible layout.


Additional note: You have previously asked about controlling the speed of the scroll. If You look in the function "appLoad" which controls this scene-to-scene scrolling You will see the following code:

if(upORdown === 1){
		hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 2.1)
	}else{
		hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 2.1)
	}

Simply change the the "2.1" (which is seconds) in this code to another number.


Original thread:

3 Likes

@JimScott Thank you for your very detailed reply and example document you created. I am very grateful for your help on this!

The scrolling response in your example is brilliant and works very well. I haven’t designed my site with separate scenes, but I’m sure this is something that I would be able to redesign.

Currently my existing project consists of one long page divided into sections either by coloured rectangle elements as backgrounds or full screen images, as I was looking to implement this site linked here: https://www.fb.se/

This site I have linked would be the perfect result of what I am looking to achieve. It looks to be one long page which scrolls to the next or previous section based on the mouse scroll direction, but also has full use of the scroll bar which over rides the scrolling animations when being used. It will also however scroll to the nearest section when the scroll bar is released if the user hasn’t fully centered it within the viewport.

I would be happy and am looking to redesign my site within separate scenes as I can also see other benefits for this, but would there be a away to have a scroll bar which can be used to scroll through all scenes as if one long page?

Also if possible is there any way of changing the scrolling animation between scenes like the linked example.

Thank you so much again for your help on this!

Hi Ollie!

I do not know of a way - using the Hype interface or simple JavaScript - to have the scroll move smoothly through various scenes using the scroll bar as shown in your most recent example. So other approaches which utilize just one scene would seem to be the better fit.


Please Note: In your original example that You sited twice before my posting ("The Pete Design") there is no scroll bar.

It would be good for future questions to beware of how You phrase things - as You wrote previously...

i.e. the example was indicative of exactly how You wanted things to work.

If a scroll bar was important to your overall design it would be important to mention that fact - or any other variances from a given example - in your post(s). :wink:

1 Like

I can’t tell you how useful this is Hans. Thank you!!!

Is there a way to trigger a move to “one”, “two”, “three” or “four” based on code (to make it scrollable by buttons on the page)?

Thanks

Hyper

remove the ‘var’ before ‘scrollToYPos’ to make it a global function.

this’d enable a call from eg a button:
scrollToYPos(scrollToPositions[yourPreferedIndex], speed*optional, easing*optional)

if you’d like, keep it within hypescope by:
var scrollToYPos = hypeDocument.scrollToYPos = function ...

you may have a look over here:

Sorry Hans -- maybe I'm overlooking something, but I can't find scrolltoYPos in the original code -- ??

var yourTargetIds = ['one', 'two', 'three', 'four'];
easing =  'easeOutSine';//easeInOutSine easeOutSine


//////////////////////////////////////////////noothing to do below ....

window.onload = window.onresize = function(){
var viewportHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);

var docHeight = '' + (yourTargetIds.length * viewportHeight) + 'px';
document.getElementById(hypeDocument.documentId()).style.height = docHeight;
hypeDocument.currentSceneElement().style.height = docHeight;

scrollToPositions = [];
	
for(var i = 0; i < yourTargetIds.length; i++){
var newTopPosition = i * viewportHeight;
hypeDocument.setElementProperty(hypeDocument.getElementById(yourTargetIds[i]), 'top', newTopPosition, 0.3);
scrollToPositions.push(newTopPosition);
}

Code ist in the head-section … :smile:

1 Like

Thank you Hans. Thank you.

In this project,

Is there way to pin an object to the bottom of the viewport (like a Brand logo or such that needs to be fixed on the screen at the bottom) so that, in spite movement between Symbol 1 through 4, the object remains pinned 50 px from bottom of the screen? I tried doing this but each time the element takes the bottom of Symbol 4 as the bottom instead of the bottom of the viewport.

I am trying to combine the function of this:

applied to the auto-scrolling web pages here!

Thanks,

Hyper

autoScrollToElement-1.hype.zip (26.7 KB)

it’s tricky within hype, because the API wants to control the position …

advise: when working with hype i’d avoid working against it.

2 Likes

So simple yet so brilliant.

I admit I did not understand what you mean by working against Hype / the API. Feels a bit like Yoda advising not to work against the Force :smile:

Thank you Hans.

everything that manipulates positions or dimensions of elements (e.g. css position fixed) from outside can lead to unexpected results …

1 Like

Got it. Thank you!

I have add a fullScreen JS to this document but am facing some trouble when the page exits full screen and lands in between 2 scroll positions. Is there a way for Hype to detect that the page has exited full screen and to automatically scroll to the top of the page it was at before exiting the full screen. For e.g,. go to full screen, scroll to Symbol 2 (yellow) and then exit the full screen.

I found this which may or may not help:

I am attaching the file with the full screen here.

autoScrollToElement-1 - full screen.hype.zip (31.7 KB)

Per the documentation, going in and out of fullscreen generates an fullscreenchange event that you can listen for. If the document.fullscreenElement is null at that point, you are exiting. From there and you can perform the scroll you’d like.

I see code in your document that seems to have positional knowledge, so you can use that. For demonstration purposes I just have this code scroll to the top:

document.onfullscreenchange = function ( event ) { 
	if(document.fullscreenElement == null) {
		// scroll to the proper position here
		window.scrollTo(0,0);
	}
}
1 Like

Thank you Jonathan! Works perfectly!!!

A few queries related to detecting the last scroll position:

  1. For users that are scrolling manually, vs. using a button, is there a way to keep track of which scroll position the user scrolled to last e.g. “one, two, three”, so that upon exit, we can scroll to that position vs. always to “one”?

  2. The converse of exiting from a fullscreen … if a user has yet to enter full screen, it lands between the two pages (e.g. if you scroll to the second page and then click the Full screen button, it lands up between page 1 and 2.) Any way to get it to scroll to the top of Screen 2 upon entering full screen (since that is where it was scrolled to last)?

  3. Based on where it scrolled to last e.g. “Two”, can I trigger a Custom Behavior such as “Change color Button 2”?

Here is the file I am working on if helpful.

autoScrollToElement-1 - full screen2.hype.zip (33.7 KB)

Thanks in advance for your help!!!

HappyHyper

There’s enough code there that it is hard to follow and figure out if there are simple solutions for those problems. The answer is definitely yes to all the above though, as with code anything is possible :slight_smile:. I assume the code is a combination of items in the above posts, so maybe others can contribute towards a solution.

Thanks Jonathan!! Agree – with code, anything is possible :slight_smile:

For anyone that may have some ideas, let me paste the code and try to simplify the key question:

How can one build on / modify this code to track whether the user has manually (using finger or mouse etc.) scrolled to position one, two, three or four?

Here is the code:

var yourTargetIds = ['one', 'two', 'three', 'four'];
easing =  'easeOutSine';//easeInOutSine easeOutSine

////noothing to do below ....

window.onload = window.onresize = function(){
var viewportHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);

var docHeight = '' + (yourTargetIds.length * viewportHeight) + 'px';
document.getElementById(hypeDocument.documentId()).style.height = docHeight;
hypeDocument.currentSceneElement().style.height = docHeight;

scrollToPositions = [];
	
for(var i = 0; i < yourTargetIds.length; i++){
var newTopPosition = i * viewportHeight;
hypeDocument.setElementProperty(hypeDocument.getElementById(yourTargetIds[i]), 'top', newTopPosition, 0.3);
scrollToPositions.push(newTopPosition);
}

}

Thank you.

Happy Hyper