我正在用jquery mobile構建移動Web應用程序。現在我想做一個回到頂部的行動。通常你應該像下面的代碼那樣做。返回頁首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()功能如果要動畫您可以使用animate改變scrollTop財產滾動用於滾動to a particular Y position without triggering scroll event listeners.（http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html）

的可滾動頁面元素（有時它是<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/

文檔：

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

更新

您可以在鏈接或按鈕控件設置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

回答

更新

相關問題