响应式JS页面从底部而不是顶部加载

Responsive JS page loading toward bottom instead of top

本文关键字：顶部 加载 底部 JS 响应      更新时间：2023-09-26

我是一个新程序员，正在开发我的第一个RoR站点(Rails 4.0.4, ruby 2.1.1p76)。我已经实现了一个引导主题(https://wrapbootstrap.com/theme/journey-animated-landing-page-WB0K438LJ)与一些响应式JS，允许文本褪色/背景颜色的变化基于滚动位置。

一切都很好，除了当页面加载时，它加载到页面的3/4处。我试着添加window.scrollTo(0,0);在我的main.js文件中，它在顶部加载页面，但随后弄乱了所有响应特性。当页面向下加载3/4时，我手动滚动到顶部，响应功能工作得很好。

我花了几个小时研究，还没有找到一个解决方案，所以我不认为这是一个重复的问题，但我很抱歉，如果它是因为JS对我来说是非常新的。大部分问题都指向涡轮链接，我已经关闭了。

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  ------*/
});

问题是视图底部的一个表单，设置:autofocus => true，它将页面拉下。

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

我不熟悉这个引导主题。但我敢打赌你的补偿是有意义的。试着改变:

{ offset: '55%' }


{ offset: '0%' }

我的直觉是这就是导致问题的原因。

相关文章：