0

フローティング アクション ボタンを長いページに実装したいと思います。簡単なhtmlページを書くとうまくいきます。しかし、1つのhtmlに複数のページを書き込むとうまくいきません。内部ページ間をジャンプした後、$(window).scroll イベントは発生しません。簡略化したソースコードを示します。

<!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>

このページをロードすると、通常はスクロール イベントが発生し、フローティング アクション ボタンが表示されます。しかし、「ページ B」にジャンプした後は、スクロール イベントは発生しなくなります。

誰かが何が悪いのか教えてもらえますか?

4

1 に答える 1

1

こんにちは、私はそれを確認しました。場所が変更されているため、ページ B をクリックしても jQuery(window).scroll が機能しないという問題がありました。単にこの変更 jQuery(window).scroll to 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;
})
});
于 2015-04-21T02:38:25.000 に答える