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

Question

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

应用程序.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 包含它。