scrollTop() doesn't always work

Question

Sometimes when I load my website I am unable to scroll down. This happens pretty infrequently, but I would really like to understand why it sometimes happens. The idea is that when you scroll down the top portion of the website fades out and when you scroll back up the bottom portion of the website fades. I realize this is probably unnecessary which is why I'm working on redesigning it. But for now I was hoping I could make a quick fix to it.

Here is the Javascript for the home 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

EDIT, Just change your whole ExternalFile.js with this :) just your code edited

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