除非重新加载页面，否则滚动事件不起作用

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;
    }
}

当我打开一个新页面时，比如 localhost:3000/signup，按钮向上滚动就好了。但是如果我点击另一个页面，滚动事件就不会发生。因此，如果我重新加载页面或在另一个选项卡中打开新页面，该按钮可以正常工作。什么可能导致问题？

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 

    });