滚动到Rails 4应用程序中的顶部jQuery

Question

我学习了关于创建fadeIn/Out jQuery scrollTo函数的各种教程。但是似乎与css display:none有一些冲突，因为它没有显示在页面上，如果我删除css display:none，它会显示div，但显然fadeIn/Out不起作用。

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 600) {
            $(".scrollToTop").fadeIn(1000)
        } else {
            $(".scrollToTop").fadeOut(1000);
        }
    });
    //Click event to scroll to top
    $(".scrollToTop").click(function(){
        $('html, body').animate({scrollTop : 0},500);
        return false;
    });

其他运行的js代码

$(window).scroll(function() {
      if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
        $(".navbar-transparent").addClass("navbar-color");
        $(".navbar-nav").addClass("navbar-nav-dark");
        $(".logo_dark").show();
        return $(".logo_light").hide();
      } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
        $(".navbar-transparent").removeClass("navbar-color");
        $(".navbar-nav").removeClass("navbar-nav-dark");
        $(".logo_light").show();
        return $(".logo_dark").hide();
      }
    });

CSS

.scrollToTop {
    margin: 0;
    position: fixed;
    bottom: 8.5%;
    right: 0;
    z-index: 100;
    display: none;
    text-decoration: none;
    color: #ffffff;
    background-color: rgba(100, 193, 151, .7);
    padding: 10px 20px 10px 10px;
    font-size: 12px;
}
.scrollToTop:hover {
    background-color: rgba(100, 193, 151, 1);
    color: #ffffff;
    text-decoration: none;
}

HTML

<a href="#" class="scrollToTop"><i class="fa fa-angle-up"></i> Back to top</a>

Answer 1

这个问题几乎可以肯定是因为浏览器在DOM加载完成之前就已经开始处理您的js了，所以我猜您的.scrollToTop锚点已经接近HTML的末尾了。

您应该做的是在文档准备好后绑定事件：

$(document).ready(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop() > 600) {
            $(".scrollToTop").fadeIn(1000)
        } else {
            $(".scrollToTop").fadeOut(1000);
        }
    });
    //Click event to scroll to top
    $(".scrollToTop").click(function(){
        $('html, body').animate({scrollTop : 0},500);
        return false;
    });
}

（您应该对当前运行的代码执行此操作，否则您可能会发现一些计算机速度较慢的用户有更多未绑定到其对象的事件）

附带说明：您不应该真正将javascript放入application.js，而应该创建一个新的资产，如"init.js"，并告诉application.js将其包含在内。