ScrollTop () does not always work

Question

Sometimes, when I load a website I cannot scroll down. This happens quite rarely, but I would really like to understand why this happens sometimes. The idea is that when you scroll down, the top of the site disappears, and when you scroll through the backup, the bottom of the site disappears. I understand that this is probably not necessary, so I am working on redesigning it. But now I was hoping that I could quickly fix the situation.

Here is the Javascript for the main page:

            $('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
    })
  })
});