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

Scroll event doesn't work unless the page is reloaded

本文关键字：新加载 加载 不起作用 事件 滚动      更新时间：2023-09-26

我希望使用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，按钮就会滚动起来。但如果我点击另一个页面，滚动事件就不会发生。因此，如果我重新加载页面或在另一个选项卡中打开一个新页面，该按钮都可以正常工作。什么可能导致这个问题?

turbollinks的工作原理是通过AJAX获取链接的内容并替换文档的内容-这大大加快了页面加载速度。

这样做的一个后果是，当一个页面最初在浏览器中打开时，"document ready"事件只在页面周期中触发一次。

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

我用这一行来包装Jquery脚本，它成功了:

    $(document).on('turbolinks:load', function() {
   // ...script for button 
    });
相关文章：