javascript - scrollTop() 并不总是有效

Question

有时当我加载我的 website 时我无法向下滚动。这种情况很少发生，但我真的很想了解为什么有时会发生这种情况。这个想法是，当您向下滚动时，网站的顶部会淡出，而当您向上滚动时，网站的底部会淡出。我意识到这可能是不必要的，这就是我正在努力重新设计它的原因。但现在我希望我能快速修复它。

这是主页的 Javascript:

            $('html').addClass('jsEnabled');
            $(function(){   
            $('#particles-js').hide(0).delay(1000).fadeIn(400);
            $('header').hide(0).delay(1000).fadeIn(300);
            $('#intro1').hide(0).delay(1300).fadeIn(300);
            $('#intro2').hide(0).delay(1800).fadeIn(300);
            $('#down').hide(0).delay(2000).fadeIn(300);
            $('#arrow').delay(2200).show('slide',{direction:'up'},400);


            /// Scroll down 
            $(window).scroll(function(){
                $('#intro').css("opacity",1-$(window).scrollTop()/300);
            });
            $(window).scroll(function(){
                $('#arrow').css("opacity",1-$(window).scrollTop()/100);
            });
            $(window).scroll(function(){
                if($(this).scrollTop()>50){
                    $('#case-studies,#connect').fadeIn(); 
                } else {
                    $('#case-studies,#connect').fadeOut();
                }
            /// Scroll back to top
            $("a[href='#case-studies']").click(function() {
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
                });
            }); 
            $("body").css("height",window.outerHeight + 200 + "px");    

            $(window).on('resize',function(){ /// for resize
                $('#intro').css('margin-top', function () {
                return ($(window).height() - $(this).height()) / 3
            });
            }).resize();
            /// Fadeout on page load
            $("a.transition").click(function(event){
                event.preventDefault();
                linkLocation = this.href;
                $("body").fadeOut(1000,redirectPage);
            });

            function redirectPage() {
                window.location = linkLocation;
            }

             $('#back-to-middle').on('click', function (e) {
                    e.preventDefault();
                    $('html,body').animate({
                        scrollTop: 600
                    });
                });




        });

Answer 1

编辑，用这个改变你的整个ExternalFile.js :)只是你的代码被编辑了

$('html').addClass('jsEnabled'),
$(function () {
  function n() {
    window.location = linkLocation
  }
  $('#particles-js').hide(0).delay(1000).fadeIn(400),
  $('header').hide(0).delay(1000).fadeIn(300),
  $('#intro1').hide(0).delay(1300).fadeIn(300),
  $('#intro2').hide(0).delay(1800).fadeIn(300),
  $('#down').hide(0).delay(2000).fadeIn(300),
  $('#arrow').delay(2200).show('slide', {
    direction: 'up'
  }, 400),

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  // you must put a condition so the value of 
  //opacity remain between 0 and 1
  // when viewing you website source code 
  //from "Mozilla DOM Inspector" or any other dev tools
  // you can see the the opacity is 
  // between -6 and 6 witch are not valid value for opacity property
  // so the arrow isn't shown 
  if (scrollTop <= 300) {
    $('#intro').css('opacity', 1 - scrollTop / 300);
  }

  // same for here
  if (scrollTop <= 150) {
    $('#arrow').css('opacity', scrollTop / 150); 
    // "scrollTop/150" NOT "1 - ScrollTop/150" witch 
    // will produce the opposite of what you want
  }

  // You have to put the value of fadeIn to 3 seconds 
  // so the user can notice the effect 
  //fadeIn(3000)

  if (scrollTop > 50) {
    $('#case-studies,#connect').fadeIn(3000);
  } else {
    $('#case-studies,#connect').fadeOut();
  }

}),
  $('body').css('height', window.outerHeight + 200 + 'px'),
  $(window).on('resize', function () {
    $('#intro').css('margin-top', function () {
      return ($(window).height() - $(this).height()) / 3
    })
  }).resize(),
  $('a.transition').click(function (o) {
    o.preventDefault(),
    linkLocation = this.href,
    $('body').fadeOut(1000, n)
  }),
  $('#back-to-middle').on('click', function (n) {
    n.preventDefault(),
    $('html,body').animate({
      scrollTop: 600
    })
  })
});