頁面滾動動畫後無法正常滾動

Question

當頁面從頂部滾動超過300px時，我將頁面滾動到div。問題是，在該動畫滾動後，我無法正常回滾。

$(function() { 
    $(window).scroll(function() { 
     console.log($(window).scrollTop()); 
     if ($(window).scrollTop() > 300) { 
      //$("body").animate({scrollTop:$wh }); 
      $('body').animate({ 
       scrollTop: $("#div2").offset().top 
      }, 200); 
     } 
    }); 
}); 

Answer 1

你需要升級你的if條件

$(function() { 
    var lastScroll = $(window).scrollTop(); 
    $(window).scroll(function() { 
     var scrollTop = $(window).scrollTop(); 
     var divTop = $("#div2").offset().top; 
      if (scrollTop > lastScroll && scrollTop <= 300) { 
      $('body').stop().animate({ 
       scrollTop: divTop 
      }, 100); 
     } 
     lastScroll = scrollTop; 
    }); 
}); 

只有當動畫當前scrollTop的更大然後是lastscroll（向下滾動） 和客戶端在300px行之後。

 if (scrollTop > lastScroll && scrollTop <= 300) { 

工作示例

http://jsfiddle.net/JAy7Y/1/

Answer 2

可能是因爲會觸發該事件一遍，每次您滾動:)

$(function() { 
    $(window).bind('scroll.once', function() { 
     console.log($(window).scrollTop()); 
     if ($(window).scrollTop() > 300) { 
      //$("body").animate({scrollTop:$wh }); 
      $('body').stop().animate({ 
       scrollTop: $("#div2").offset().top 
      }, 200); 
      $(window).unbind('scroll.once'); 
     } 
    }); 
});