Responsive JS page loading toward bottom instead of top

Question

I'm a new programmer working on my first RoR site (Rails 4.0.4, ruby 2.1.1p76). I've implemented a bootstrap theme (https://wrapbootstrap.com/theme/journey-animated-landing-page-WB0K438LJ) with some responsive JS that allows text fading/background color changes based on scroll position.

Everything works well, except that when the page loads, it loads about 3/4 of the way down the page. I tried adding window.scrollTo(0,0); in my main.js file, which loads the page at the top, but then messes up all of the responsive features. When the page loads 3/4 down and I manually scroll to the top, the responsive feature work great.

I've spent several hours researching and haven't found a solution, so I don't think this is a repeat question, but I apologize if it is since JS is very new to me. Most of the issues point to Turbolinks, which I have already disabled.

Are there any alternatives to window.scrollTo(0,0); that might not mess with the function? Or a different workaround idea? Reason why it's not loading at the top to start?

Thanks in advance for your help!

EDIT

main.js

$(function() {

  /*==========  Initalize steller for parrallax header  ==========*/

  $.stellar();

  /*==========  Initalize fit text for responsive text  ==========*/

  $(".fittext").fitText();

  /*==================================================================
  =            Hide elements if browser supports animation            =
  ==================================================================*/

  if(!Modernizr.cssanimations){
    //dont hide everything
  } else {
    $('.story-container, .story-image-container, .dot-container, .hr-container, .footer-container ').children().addClass('hide');
}

  /*-----  End of Hide elements if browser supports animation  ------*/

  /*=========================================================
  =            Use waypoint to trigger animation            =
  =========================================================*/

  $('.story-container, .story-image-container, .dot-container, .hr-container, .footer-container ').waypoint(function (direction) {

    if( direction == 'down'){

        if( $(this).children().data('delay') !== undefined ) {
            var delay = $(this).children().data('delay');
        } else {
            var delay = 0;
        }

        $(this).children().removeClass("hide").addClass("animated fadeInDown delay-" + delay );

    } else {

        $(this).children().addClass("hide").removeClass("animated fadeInDown");

    }

  }, { offset: '55%' });

  /*-----  End of Use waypoint to trigger animation  ------*/

  /*======================================================
  =            Waypoint for background colour            =
  ======================================================*/

   $('.color-change').waypoint(function (direction) {

    var colorUp = {
            backgroundColor: $(this).data('colorup')
        };            
    var colorDown = {
            backgroundColor: $(this).data('colordown')
        };

    if( direction == 'down'){

        $('body').animate( colorDown, 525 );

    } else {

        $('body').animate(colorUp, 525 );

    }

  }, { offset: '70%' });

  /*-----  End of Waypoint for background colour  ------*/

  /*===========================================
  =            Waypoint for header            =
  ===========================================*/

  $('#start').waypoint(function (direction) {

    if( direction == 'down'){

        $('#story-icons, #sub-title').fadeTo("300ms", 0);

    } else {

        $('#story-icons, #sub-title').fadeTo("300ms", 1);

    }

  }, { offset: '55%' });

  /*-----  End of Waypoint for header  ------*/

});

Answer 1

Issue was a form at the bottom of the view with :autofocus => true that was pulling the page down.

http://www.html5tutorial.info/html5-autofocus.php

Answer 2

I am not familiar with this bootstrap theme. But I'm willing to venture your offsets mean something. Try changing:

{ offset: '55%' }

To

{ offset: '0%' }

My hunch is this is what's causing problems.