Jquery “返回页首”按钮无法更改页面

我用jquery mobile创建了一些页面。我想在他们身上加上“回到顶端”的元素。到目前为止效果很好。但当我转到另一个“页面”——例如“运动”（在向下滚动并使用“顶部！”——链接后），然后返回到“餐厅”时，该元素不会出现。当我刷新页面时，链接会出现并起作用。也许是因为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>

我的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;
});   

我能做什么，我的“转到顶部”元素将始终出现，而不仅仅是在我刷新页面时出现？

只需使用

---

$（窗口）。scrollTop（）

而不是

$（此）。scrollTop（）

即使未单击链接，您的滚动函数也是正确的，因此应将其移出操作处理程序：

$(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;
});
});

因此，现在任何滚动都将根据滚动条的位置隐藏或显示顶部链接，无论它是在加载、用户滚动或单击顶部链接时处于该位置

---

使用jQM特殊事件

scrollstart

或

scrollstop

代替收听

scroll

事件。另外，您不应该使用

.ready（）

或匿名函数

$（function（）

），而应该使用页面事件

创建页面后，将

单击
侦听器添加到
顶部
锚定
页面创建
，并收听
滚动停止
事件以显示或隐藏锚定

$(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();
        }
    });
});


不幸的是，这没有帮助。只要我不点击“顶部！”按钮，它就会工作。但是如果我向下滚动，点击“顶部！”-按钮，然后转到另一个页面并返回到#餐厅，然后按钮就消失了。好吧，没有fadeIn/fadeOut功能，它工作得很好，但有时当我刷新页面时，链接会出现，有时不出现。有时出现，然后消失，我再也看不到它了。这让人困惑。如果页面已经在顶部，它就会消失。Jus如果您希望链接始终可见，请不要删除整个fadein fadeout功能块，并注意我为定位链接添加的附加css是的，谢谢！！但是如果用户正在滚动，我希望它淡入：）为什么不起作用？如果您希望它淡入，它也必须淡出。现在，当滚动条距离顶部150像素或更少时，它将淡出，当其>150px时淡入。我的小提琴行得通，但你真正的测试不行吗？或者它们都不符合您的规范？您使用的是哪个jQM版本？好的，我添加了一个基于jQM 1.4的答案。
$(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();
        }
    });
});