Scroll to element when user scrolls from top down

Question

I am trying to do a effect like on the App Builder Website. When the user is at the header with the background image/video and scrolls down, the site scrolls down to the next div/section/etc. .
If the user scrolls back up and the image/video part is reached, the page scrolls to the top of it.
I have tried the following code but there is bug i can't find:

function scrollto(where){
   $('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
   console.log('Scrolled to ' + where);
   closeMenue();
}


var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){  
  if (scroll == 0){
    scrollto('.about');
  }
  else{
  }
} else {  
  if (scroll == 530){
    scrollto('.parallax'); 
  }
  else{
  }
}
lastScrollTop = st;
});

It is working fine, but only once. Is there a Plugin I can use? Sorry for my bad english :(

Yep, that site is using [fullPage.js](http://alvarotrigo.com/fullPage/) as you can see from their code. — Alvaro, Apr 07 '15 at 16:07
Seems your code could be simplified : `if (st > lastScrollTop) scrollto('.about'); else scrollto('.parallax');`. Are you sure the second section is always *exactly* at 530 pix offset? In any case, you shouldn't really need to check. — Shikkediel, Apr 07 '15 at 16:36

score 1 · Accepted Answer · answered Apr 07 '15 at 16:06

1

The site you posted is making use of fullPage.js plugin.

It works using CSS3 transitions with a fallback to jQuery when needed.

If you don't want to use jQuery, there's even a pure javascript version for it in development but functional.

answered Apr 07 '15 at 16:06

Alvaro

40,778
30
164
336

Thank you! It is a really nice Plugin! I am going to use it – Tomas K Apr 07 '15 at 17:46

score 0 · Answer 2 · answered Mar 26 '15 at 17:54

0

dont use jquery for smooth transitions. is better do that things with css methods.

check this if want use any library

answered Mar 26 '15 at 17:54

julian

374
2
11

score 0 · Answer 3 · edited May 23 '17 at 10:24

So, here's what I believe I'm seeing on their site if you want to do something similar:

No scroll bar; you'll need to make your top-most container have overflow: hidden. It might be best to capture scroll wheel events. See here for more details: Get mouse wheel events in jQuery?
The active viewport gets a class "active". They're presumably using it to keep track of which viewport to scroll to next and maybe to determine

So, in your scroll wheel event handler, you'll need to:

Determine first if you're going up or down. (Outlined in the SO link above)
You'll need to find the next sibling div/viewport/container/whatever that's not active.
You'll want to move the active class to that appropriate sibling (previous/next depending on up/down) and scroll it into view using scrollTop.

Scroll to element when user scrolls from top down

3 Answers3