Auto-Scroll to next anchor on Mouse-wheel movement

Using JavaScript with Hype
1

Hi there,

I’m looking to find out if it would be easy enough to include some javascript for an OnScroll function which will scroll the page either up or down to a specific section, relating to the direction of the scrolling input from the user.

For example when the user scrolls with a downwards direction, the page will scroll to a specific position higher up the page.

I have found this demo which works exactly to how I am imaging. It has various code to add, however I am struggling to get it to work within Hype.

Thanks for any help / suggestions.

2

Does this example have the behavior you want?

3

Hi Jonathan,

Absolutely, this is what I was looking for.
Thanks!

René

4

Thanks Jonathan for the reply.

I am looking for a similar behaviour to that yes, however I have built my site as one long scrolling page. I was hoping instead that when the user scrolled there is a way to animate the viewport to scroll to the nearest anchor (an element with unique id) depending on the scroll direction.

The example I have linked below works just how I was hoping:

http://www.thepetedesign.com/demos/onepage_scroll_demo.html

Thanks again.

5

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.

6

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 :slight_smile: main codesnippets are copy pasted … source within code …

4 Likes
7

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.

8

you shouldn't go with scrolling then, but use the example in jonathans hint ...

9

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.

10

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
11

@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!

12

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
13

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

14

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 ...

15

you may have a look over here:

16

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);
}
17

Code ist in the head-section … :smile:

1 Like
18

Thank you Hans. Thank you.

19

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

20

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