我是一名新程序员，正在开发我的第一个 RoR 站点(Rails 4.0.4、ruby 2.1.1p76)。我已经使用一些响应式 JS 实现了引导主题 ( https://wrapbootstrap.com/theme/journey-animated-landing-page-WB0K438LJ )，允许根据滚动位置进行文本淡入淡出/背景颜色更改。
一切运行良好，只是当页面加载时，它会加载页面下方的大约 3/4。我尝试添加 window.scrollTo(0,0);在我的 main.js 文件中，该文件在顶部加载页面，但随后弄乱了所有响应功能。当页面向下加载 3/4 并且我手动滚动到顶部时，响应式功能效果很好。
我花了几个小时研究但没有找到解决方案，所以我不认为这是一个重复的问题，但如果是的话我很抱歉，因为 JS 对我来说很陌生。大多数问题都指向 Turbolinks，我已经禁用了它。
是否有 window.scrollTo(0,0); 的替代方案这可能不会扰乱该功能？或者不同的解决方法想法？为什么它没有从顶部加载开始？
预先感谢您的帮助!
编辑
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 ------*/
});
最佳答案
问题是 View 底部的一个带有 :autofocus => true 的表单正在向下拉页面。
关于javascript - 响应式 JS 页面加载到底部而不是顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23525994/