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

Question

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

应用程序.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 anchor 接近你的 HTML 的末尾。

你应该做的是在文档准备好后绑定(bind)事件:

$(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;
    });
}

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

旁注:您不应该真正将 javascript 放入您的 application.js 中，而是创建一个新 Assets ，如“init.js”并告诉 application .js 来包含它。