Question

我有一些用jquery mobile创建的页面。我想在它们上面放一个“回到顶部”的元素。到目前为止它运作良好。但是当我转到另一个“页面” - 例如#sport - （在向下滚动并使用“TOP！” - 链接后）然后回到#restaurants时，该元素不会出现。当我刷新页面时，链接出现并起作用。也许是因为ajax并且“页面”在一个HTML中？我对这一切都很陌生，所以我只是看不出有什么不对。

我的HTML：

<div id="restaurants" class="page page-3" data-role="page">
    <div class="header">
        <h1 class="title">Restaurants</h1>
    </div>
    <div class="content" **id="top"**>
        <div class="row"></div>
            <div class="info-paragraph">
                <h2>Test 1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="info-paragraph">
                <h2>Test 2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="info-paragraph">
                <h2>Test 3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
                **<a class="top" data-ajax="false" href="#top">TOP!</a>**
            </div>
            <div style="clear:both;"></div>
    </div>
</div>

<div id="sport" class="page page-4" data-role="page">
    <div class="header">
        <h1 class="title">Sport</h1>
    </div>
    <div class="content">
        <div class="row"></div>
            <div class="info-paragraph">
                <h2>Sport 1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="info-paragraph">
                <h2>Sport 2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="info-paragraph">
                <h2>Sport 3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>              
            <div style="clear:both;"></div>
        </div>
    </div>

CSS：

.top {
    position: fixed;
}

我的JS：

$(document).delegate('a.top', 'click', function () {
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
  $('a.top').fadeIn();
} else {
  $('a.top').fadeOut();
}
});
$('html, body').animate({ scrollTop : 0 }, 800);
return false;
});

我能做什么，我的“Go to top”元素将始终显示，而不仅仅是我刷新页面？

Answer 1

使用jQM特殊事件scroll或scrollstart，而不是收听scrollstop事件。此外，您不应使用.ready()或匿名函数$(function()，而是使用页面事件。

创建页面click后，将top监听器添加到pagecreate锚点，然后收听scrollstop事件以显示或隐藏锚点。

$(document).on("pagecreate", "#restaurants", function () {
    $('.top').fadeOut("fast");

    $(".top").on("click", function () {
        $('html, body').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

    $(window).on("scrollstop", function () {
        if ($(window).scrollTop() > 150) {
            $('.top').fadeIn();
        } else {
            $('.top').fadeOut();
        }
    });
});

<强> Demo

Answer 2

即使未点击链接，您的滚动功能也是如此，因此应将其移出动作处理程序：

$(function (){
$(window).scroll(function () {
    if ($(this).scrollTop() > 150) {
        $('a.top').fadeIn();
    } else {
        $('a.top').fadeOut();
    }
});
$(document).delegate('a.top', 'click', function () {

    $('html, body').animate({
        scrollTop: 0
    }, 800);
    return false;
});
});

所以现在任何滚动都会隐藏或显示基于滚动条位置的Top链接，无论是从加载，用户滚动还是点击Top链接开始。

http://jsfiddle.net/crazytonyi/Nf55S/1/

Answer 3

只需使用 $(window).scrollTop()代替$(this).scrollTop()。

返回页首按钮不能处理页面更改

3 个答案: