Javascript 滚动至Rails 4应用程序中的顶级jQuery

我已经学习了关于创建fadeIn/Out jQuery scrollTo函数的各种教程。但是css显示似乎有一些冲突：无，因为它没有显示在页面上，如果我删除css显示：无，它显示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

HTML

---

这个问题几乎可以肯定，因为浏览器在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放入你的

应用程序.js

中，而应该创建一个新的资产，比如“init.js”，并告诉

应用程序.js

将其包含进去。

似乎正在工作。有什么错误吗？你能解释一下你这边到底发生了什么吗？没有错误，div根本不会显示，就像在淡入中一样。在

If

之前，添加这个

console.log（$（this.scrollTop（））

，如果scrollTop超过600，检查控制台。你确定js代码正在运行吗？你能把一个警告放进去看看吗？我在页面上有其他的js代码运行良好。我在上面添加了另一个滚动功能。这可能有冲突吗？谢谢！将脚本移出application.js为我解决了这个问题。也感谢@anpsmn的帮助

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

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