When user scrolls past 10px from the top, I'd like to hijack their scroll and scroll them down to certain div. After this happens once, I'd like to release the scroll to be free to scroll wherever. How do I do this?

My current code works but it won't let user to scroll freely after that initial scroll:

$(window).scroll(function() {

    //if I scroll more than 1000px...
    if($(window).scrollTop() > 10){
         $('html,body').animate({scrollTop : $('#main').offset().top}, 900, function(){
            h = 2; 
        });
    }
});

When user scrolls past 10px from the top, I'd like to hijack their scroll and scroll them down to certain div. After this happens once, I'd like to release the scroll to be free to scroll wherever. How do I do this?

My current code works but it won't let user to scroll freely after that initial scroll:

$(window).scroll(function() {

    //if I scroll more than 1000px...
    if($(window).scrollTop() > 10){
         $('html,body').animate({scrollTop : $('#main').offset().top}, 900, function(){
            h = 2; 
        });
    }
});

• javascript
• jquery

• whats the h = 2 for? – Paul Browne Commented Nov 9, 2015 at 23:09

1 Answer 1

Try:

var scrolled = false;

$(window).scroll(function() {

    //if I scroll more than 1000px...
    if($(window).scrollTop() > 10 && scrolled == false){
         $('html,body').animate({scrollTop : $('#main').offset().top}, 900, function(){
            h = 2; 
        });
      scrolled = true;
    } else if($(window).scrollTop() == 0) {
      scrolled = false;
    }
});