jQuery scrollTop()问题

Question

我试图实现这个目标:点击qhen按钮，html被动画化到“迎宾”部分，只有这样溢出-y才是可见的(所以如果不按按钮，就不能从标题向下滚动)。(这是第一个剧本)。但我对第二个剧本有问题。基本上是滚动和修复高度0px的文档，不能向下滚动。我在这里试图实现的是，如果您从“欢迎”部分回滚，则html将被动画显示到页面的顶部(返回初始状态下的所有内容)。

$(window).ready(function() {

    $(".scroll-icon").click(function() {

        $('html, body').animate({
            scrollTop: $("#welcome").offset().top
        }, 2000); 

        $("html").delay(200).queue(function (next) { 
            $(this).css({
                'overflow-y': 'visible'
            }); 
            next(); 
          });
    }); 

    $(window).scroll(function() {

        var distance = $("#welcome").offset().top

          if ($(document).scrollTop() < distance) {
             $('html, body').animate({
                 scrollTop: $("#header").offset().top
             }, 2000);
          } 
    });


});

下面是一个显示我的问题的JsFiddle：https://jsfiddle.net/kp2yqyo8/6/

感谢所有人:)

Answer 1

我试过这个：

// 1. Use a flag to check when you're welcome to the party!.
window.ImWelcome = false;

// 2. Your event click handler -- Same
$(".scroll-icon").click(function() {

    $('html, body').animate({
        scrollTop: $("#welcome").offset().top
    }, 2000); 

});  

// 3. Scroll handler...
$(window).scroll(function() {

    // 3.1 Store the values 
    var distance  = $("#welcome").offset().top
    var scrollTop = $(document).scrollTop();

    // 3.2 So..? Did you arrive to the party already ?
      if(scrollTop == distance){
        window.ImWelcome = true; // 3.2.1 Oh Yeah! 
      }

      // 3.3 Hmmm ... Seems like you want to leave huh? Ok let me take you to home
      if ($(document).scrollTop() < distance && window.ImWelcome) {
         $('html, body').animate({
             scrollTop: $("#header").offset().top
         }, 2000);

         // Oh You're home and not welcomed 
         window.ImWelcome = false;
      } 

});

现在，认真地说，旗法很简单。这使用了一个全局变量，因为它必须将状态保持在标志中。

JsFiddle在这里！