Q:

Back to top button not working on page change

I have some pages created with jquery mobile. I wanted to put a "back to top"-element on them. It works well so far. But when I go to another "page" - for example #sport - (after having scrolled down and used the "TOP!"-Link) and then back to #restaurants, the element does not appear. When I refresh the page, the Link appears and works. Perhaps it is because of the ajax and that the "pages" are in one html? I'm quite new to all that, so I just don't see what's wrong.
my 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;
}

My 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;
});   

What can I do, that my "Go to top" Element will always appear and not only if I refresh the page?

A:

Instead of listening to scroll event, use jQM special events scrollstart or scrollstop. Also, you shouldn't use .ready() or anonymous functions $(function(), use page events instead.
Add click listener to top anchor once page is created pagecreate, and listen to scrollstop event to either show or hide the anchor.
$(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

