Question

我希望设置一个＆＃34;向上滚动＆＃34;使用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获取链接的内容并替换文档的内容 - 这会加快页面的加载速度。

这样做的一个结果是＆＃34;文件准备就绪＆＃34;事件仅在页面循环中在浏览器中最初打开页面时触发一次。

因此，当替换内容时，您附加到#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 

    });

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

2 个答案: