Issue was a form at the bottom of the view with :autofocus => true that was pulling the page down.
Responsive JS page loading toward bottom instead of top
-
17-07-2023 - |
Frage
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 ------*/
});
Lösung
Andere Tipps
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.