jQuery scrollTop（）问题

Question

我正在尝试实现这一点：点击qhen按钮，html向下动画到“Welcome”部分，然后只有Overflow-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://jsfidle.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在这里！