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 here!

jQuery scrollTop（）问题

1 个答案: