Перейти к началу страницы jQuery in Rails 4 app

Question

Я следил за различными учебниками по созданию функции прокрутки fadeIn/out jQuery. Но, похоже, какой-то конфликт с дисплеем css: none, поскольку он не отображается на странице, если я удаляю 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

.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

Эта проблема почти наверняка связана с тем, что браузер начал обрабатывать js до завершения загрузки DOM, поэтому я предполагаю, что ваш якорь .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; 
    }); 
} 

(Вы должны сделать это для вашего кода, который в настоящее время работает, как хорошо или вы можете обнаружить, что некоторые пользователи с более медленными компьютерами есть даже больше событий, которые не связаны с их объектами)

Side Примечание: Вы не должны действительно помещать JavaScript в вашем application.js, а сделать новый актив, как «init.js» и сказать application.js, чтобы включить его.