Question

我是在我的第一个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对我来说很新。大多数问题都指向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  ------*/

});

Answer 1

问题是视图底部的一个表单：autofocus =＆gt;是的，这就是把页面拉下来。

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

Answer 2

我不熟悉这个引导主题。但是，我愿意冒险尝试你的补偿意味着什么。尝试更改：

{ offset: '55%' }

要

{ offset: '0%' }

我的预感是这是造成问题的原因。

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

2 个答案: