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

EDIT、ただ、これであなたの全体の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 
    }) 
    }) 
});