除非重新加载页面，否则Scroll事件不起作用
除非重新加载页面，否则Scroll事件不起作用
提问于 2016-09-06 20:16:20
我希望使用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，这个按钮就可以正常滚动。但是如果我点击另一个页面，滚动事件就不会发生。因此，如果我重新加载页面或在另一个选项卡中打开一个新的页面，该按钮都可以正常工作。什么可能会导致该问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-06 20:41:38
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
Stack Overflow用户
发布于 2016-09-06 20:50:35
我用下面这行代码包装了Jquery脚本，它做到了：
$(document).on('turbolinks:load', function() {
// ...script for button
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39348844
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号