在HTML中使用多个页面时，$（window）.scroll不会触发事件

Question

I would like to implement floating action button into long pages. 我想在长页面中实现浮动操作按钮。 It works well when I write simple html page. 当我编写简单的html页面时，它运行良好。 But, it does not work properly when I write multiple pages into one html. 但是，当我将多个页面写入一个html时，它无法正常工作。 It does not fire $(window).scroll event after jumping between inner pages. 在内部页面之间跳转后，它不会触发$（window）.scroll事件。 I will show simplified source codes. 我将显示简化的源代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Floating Action Button Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

<!-- PAGEA -->

<section data-role="page" id="pagea">
<header data-role="header">
<h1>PAGE A</h1>
<div class="ui-btn-right">
<a id="logoutButton" class="headerButton" href="#pageb" data-role="button">PAGE B</a>
</div>
</header>

<div data-role="content">
<h1>CONTENT</h1>
<h2>AAA</h2>
<h2>BBB</h2>
<h2>CCC</h2>
<h2>DDD</h2>
<h2>EEE</h2>
<h2>FFF</h2>
<h2>HHH</h2>
<h2>III</h2>
<h2>JJJ</h2>
<h2>KKK</h2>
<h2>LLL</h2>
<h2>MMM</h2>
<h2>NNN</h2>
<h2>OOO</h2>
<h2>PPP</h2>
<h2>QQQ</h2>
<h2>RRR</h2>
<h2>SSS</h2>
<h2>TTT</h2>
</div><!--main-->

<footer data-role="footer">
FOOTER
</footer>

</section>

<!-- PAGEB -->

<section data-role="page" id="pageb">
<header data-role="header">
<h1>INDEX</h1>
<div class="ui-btn-right">
<a id="logoutButton" class="headerButton" href="#pagea" data-role="button">PAGE A</a>
</div>
</header>

<div data-role="content">
<h1>CONTENT</h1>
<h2>aaa</h2>
<h2>bbb</h2>
<h2>ccc</h2>
<h2>ddd</h2>
<h2>eee</h2>
<h2>fff</h2>
<h2>ggg</h2>
<h2>hhh</h2>
<h2>iii</h2>
<h2>jjj</h2>
<h2>kkk</h2>
<h2>lll</h2>
<h2>mmm</h2>
<h2>nnn</h2>
<h2>ooo</h2>
<h2>ppp</h2>
<h2>qqq</h2>
<h2>rrr</h2>
<h2>sss</h2>
</div><!--main-->

<footer data-role="footer">
FOOTER
</footer>

</section>

<!-- ############################################################## -->

<a href="#" class="back-to-top">Back To Top</a>

</body>
<style>
.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
   display: none;
}

.back-to-top:hover {
    background-color: rgba(135, 135, 135, 0.50);
}
</style>
</html>

When load this page, scroll event is normally fired and floating action button is displayed. 加载此页面时，通常会触发滚动事件，并显示浮动操作按钮。 But, after jumping to 'Page B', scroll event will not be fired anymore. 但是，跳转到“页面B”后，滚动事件将不再触发。

Could somebody tell me what is wrong ? 有人可以告诉我怎么了吗？

Answer 1

Hi i have check it and the problem you have got that jQuery(window).scroll don't work when you click on Page B because the location is changes and simply to fix this change jQuery(window).scroll to jQuery(document).scroll and it will work 嗨，我检查了一下，当您单击Page B时，jQuery（window）.scroll无法正常工作是因为位置发生了变化，只是为了将此更改jQuery（window）.scroll修复为jQuery（document） .scroll，它将正常工作

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
//here you should change jQuery(window) to jQuery(document) like this
jQuery(document).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});



jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})
});

在HTML中使用多个页面时，$（window）.scroll不会触发事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-21 02:38:25

在HTML中使用多个页面时，$（window）.scroll不会触发事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-21 02:38:25

解决方案1
1 已采纳 2015-04-21 02:38:25