有时当我加载我的
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
                    });
                });




        });

最佳答案 编辑,只需用这个改变你的整个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
    })
  })
});