I’m not familiar with a particular snippet or library that will 1. take control of the scroll and 2. animate to anchor elements, but as these are both technically feasible with javascript so it is likely something exists. There was a lot of scroll/animation plugins in the jquery community so that might be the best bet to search.
autoScrollToElement.hype.zip (25.5 KB)
a setup using autoscroll to sections will only make sense when those sections are filling the whole viewport … OR you make sure that everything is within a viewport.
I’m not right sure how you did it …
hope it’ll work 
main codesnippets are copy pasted … source within code …
4 Likes
Thank you for creating an example file @h_classen this is a huge help!
I have taken a look and this is exactly how I was imagining it would work.
I have a few quick questions, and having only a very basic javascript understanding I hope you can help. Is there a way to make the scrolling animation to the next section happen as soon scrolling is detected, rather than wait for the scrolling motion to finish before animating to the next section.
Also is there away way to change the animating scrolling speed?
Thank you again for your help, its really appreciated.
you shouldn't go with scrolling then, but use the example in jonathans hint ...
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). 
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 … 
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
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.