ページがリロードされない限り、スクロールイベントは機能しません。

Question

JQueryを使ってレールアプリケーションに「スクロールアップ」ボタンを設定しようとしています。ここでは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; 
    } 
} 

私は新しいページを開く

は、localhostを言う：3000 /サインアップ、ボタンスクロールアップだけで罰金。しかし、別のページをクリックすると、スクロールイベントは発生しません。したがって、ページをリロードするか、別のタブで新しいボタンを開くと、ボタンが正しく機能します。何が問題を引き起こす可能性がありますか？

Answer 1

Turbolinksは、AJAX経由でリンクのコンテンツを取得し、ドキュメントの内容を置き換えることで動作します。これにより、ページの読み込み速度がかなり向上します。

結果として、「文書準備完了」イベントは、ページが最初にブラウザで開かれたときにページサイクルで1回だけ起動されるということです。

コンテンツが置き換えられると、#toTop要素にアタッチしたイベントハンドラは存在しなくなります。これを行うには

良い方法は、この文書に直接ではなく要素にイベントハンドラをバインドするイベントの委任に

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

を使用することです。私はこのラインでjQueryのスクリプトを包み、それがトリックをやったhttps://github.com/turbolinks/turbolinks

Answer 2

を参照してください：

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

    // ...script for button 

    });