0

I have a slider in the top section of the site. When user scrolls past a certain point–say 50px from top of page, I would like force the page to scroll to another point. So essentially, how can I recreate this effect – http://www.returntohope.com/stories#intro

beliy333
  • 479
  • 11
  • 23
  • 1
    Have you tried anything? – Harry Nov 02 '15 at 14:38
  • 1
    Ah, [scrolljacking](http://www.sitepoint.com/scrolljacking-accessibility/). 2014's favorite way to annoy browser visitors into leaving early. – Blazemonger Nov 02 '15 at 14:44
  • You really think it's not user friendly? I think in some cases it make UX better while in others, I can see how it could be annoying. – beliy333 Nov 02 '15 at 14:55
  • @Harry yes, I have tried the code below from Mohamed but it doesn't allow user to scroll back up. – beliy333 Nov 02 '15 at 15:36

1 Answers1

0

you can start from here

$(document).ready(function(){
    $(window).on('scroll',function(){
        if($(this).scrollTop() > 50){
            $('html,body').animate({scrollTop : $('#next_div').offset().top});
        }
    });
});

DEMO

Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28
  • Thanks for the code. It works however, when you try to scroll back up, it won't let you. Is there a way to fix thiat? Maybe it only triggers if user is scrolling down vs up? – beliy333 Nov 02 '15 at 14:56
  • @user1389082 sorry for delay in reply.. yes you need to triggers down and up scroll .. but that will need a little bit more of trying to achieve .. here is the link may help http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event ... and I think you may need .off('scroll') to stop scroll event .. Good Luck – Mohamed-Yousef Nov 02 '15 at 17:17