Событие прокрутки не работает, если страница не перезагружена

Question

Я ищу, чтобы установить кнопку «прокрутка вверх» с помощью JQuery для моего приложения rails. Вот скрипт JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $(window).scroll(function() { 
      if($(this).scrollTop() > 300) { 
       $('#toTop').fadeIn(); 
      } else { 
       $('#toTop').fadeOut(); 
      } 
     }); 
     $('#toTop').click(function() { 
      $('body,html').animate({scrollTop:0},300); 
     }); 
    }); 
</script> 

Вот CSS для кнопки:

#toTop { 
    width:100px; 
    text-align:center; 
    padding:5px; 
    position:fixed; 
    bottom:5px; 
    left:50%; 
    cursor:pointer; 
    display:none; 
    color:#333; 
    font-size:20px; 
    &:hover { 
     color: #8B0000; 
    } 
} 

Когда я открываю новую страницу, скажем, локальный: 3000/регистрация, кнопка прокручивает просто отлично. Но если я нажимаю на другую страницу, событие прокрутки не происходит. Таким образом, кнопка работает правильно, если я перезагружаю страницу или открываю новую на другой вкладке. Что может вызвать проблему?

Answer 1

Turbolinks работает, получая содержимое ссылки через AJAX и заменяя содержимое документа - это ускоряет загрузку страницы.

Одним из следствий этого является то, что событие «готовность документа» запускается только один раз в цикле страницы, когда страница открывается в браузере.

Поэтому, когда содержимое заменено, обработчик событий, который вы подключили к элементу #toTop, больше не существует.

Лучший способ сделать это с помощью делегирования событий

// remember that this is a shorthand for $(document).ready 
$(function() { 
    $(document).on('click', '#toTop', function(){ 
    $('body,html').animate({ scrollTop: 0 }, 300); 
    }); 
}); 

Это связывает обработчик события к документу, а не непосредственно к элементу. См https://github.com/turbolinks/turbolinks

Answer 2

Я завернул скрипт Jquery с этой линией, и это сделало трюк:

$(document).on('turbolinks:load', function() { 

    // ...script for button 

    });