Вернуться к началу с Jquery Mobile - PullRequest
Новая
       22

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

2 голосов
/ 20 марта 2012

Я создаю мобильное веб-приложение с помощью 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 используется для ссылки на внутренние страницы, поэтому описанный выше метод не работает.Кто-нибудь знает, как это сделать правильно?

С уважением.

Ответы [ 3 ]

11 голосов
/ 20 марта 2012

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 прокрутки.-able элемент страницы (иногда это <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/

Документы:

Обновление

Вы можете установить data-ajax="false" в виджете ссылки или кнопки, чтобы остановить jQueryМобильный телефон от перехвата ссылок и остановки поведения ссылок по умолчанию.

Сделайте вашу ссылку похожей на это: 

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

Вот демонстрационная версия: http://jsfiddle.net/XkjEE/

3 голосов
/ 13 апреля 2012

Я искал что-то подобное сегодня и натолкнулся на это, которое могло бы работать 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>​
1 голос
/ 20 марта 2012

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

window.scrollTo(0, 0);
...