Я создаю мобильный webapp с jquery mobile. Теперь я хочу сделать верное действие. Обычно вы должны сделать это как код ниже.Вернуться к началу с JQuery Mobile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Body ID For Top Anchor Demo</title> 
</head> 

<!-- NOTICE: ID in Body Tag. --> 
<body id="top"> 

<h1> 
This Is My Demo 
</h1> 

<p style="margin-bottom: 3000px ;"> 
This paragraph has a huge ass bottom margin 
so that the page will definitely scoll and 
put the following link below the page fold. 
</p> 

<p> 
<!-- 
This link will jump back up to the ID:top in 
the document. Since that is the ID of the body 
tag, this link will jump to the top of the page. 
--> 
<a href="#top">Back To Top</a> 
</p> 

</body> 
</html>

Но # находится в jquery mobile, используемом для связывания внутренних страниц, поэтому метод выше не работает. Кто-нибудь знает, как это сделать должным образом?

С уважением.

источник

2012-03-20 Steaphann

Вы можете просто попробовать это:

window.scrollTo(0, 0);

источник

2012-03-20 08:43:48 ghostCoder

JQuery Mobile имеет собственную $.mobile.silentScroll() функция, которая прокручивает to a particular Y position without triggering scroll event listeners. (http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html)

Если вы хотите, чтобы оживить свиток, вы можете использовать animate изменить scrollTop недвижимость элемента страницы с прокруткой (иногда это <html> иногда это <body>).

//delegate binding to only links that have the `.top` class 
$(document).delegate('a.top', 'click', function() { 
    $('html, body').stop().animate({ scrollTop : 0 }, 500); 
    return false; 
});

Вот демо с помощью $.mobile.silentScroll(): http://jsfiddle.net/XkjEE/2/

Вот демо с помощью .animate(): http://jsfiddle.net/XkjEE/1/

Docs:

scrollTop(): http://api.jquery.com/scrolltop/
delegate(): http://api.jquery.com/delegate/
stop(): http://api.jquery.com/delegate/
animate(): http://api.jquery.com/delegate/

Update

Вы можете установить data-ajax="false" на ссылку или кнопку виджета, чтобы остановить JQuery Mobile от угона кликов ссылку и останавливая поведение по умолчанию из ссылки.

Сделайте ссылку выглядеть примерно так:

<a data-ajax="false" data-role="button" href="#top">TOP</a>

Вот демо: http://jsfiddle.net/XkjEE/

источник

2012-03-20 09:56:32 Jasper

Я искал что-то подобное сегодня и наткнулся на это, которые могли бы работать http://jsfiddle.net/b4M66

на кнопку только исчезает, как только вы начинаете прокручивать страницу и исчезаете, как только вернетесь в начало страницы.

JQuery:

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() != 0) { 
      $('#toTop').fadeIn();  
     } else { 
      $('#toTop').fadeOut(); 
     } 
    }); 

    $('#toTop').click(function() { 
     $('body,html').animate({scrollTop:0},800); 
    });  
});

CSS:

#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }

HTML:

<div id="toTop">Back to Top</div>

источник

2012-04-13 13:06:40 Frasier013

Вернуться к началу с JQuery Mobile

ответ

Update

Смежные вопросы