熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery 跳到頂部和底部動畫2句代碼簡單實現

2013-11-15 12:13:08  來源: JSP教程 
使用句代碼簡單實現jquery動畫的跳到頂部和底部當點擊頂部按鈕的時候執行方法scrollTop屬性獲取選中標簽距滾動條的距離具體的實現如下感興趣的朋友可以參考下   復制代碼 代碼如下:

  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jqueryjs></script>
<script>
$(document)ready(function () {
//當點擊頂部按鈕的時候執行方法scrollTop屬性獲取選中標簽距滾動條的距離
$(#top)click(function () {
$(html)animate(
{ scrollTop: px }
);
});
//當點擊底部標簽時候執行方法其中offset()獲取匹配元素在當前視口的相對偏移返回的是一個對象有兩個屬性topleft
//animate的第二個屬性當然我們也可以設置slownormalfast
$(#foot)click(function () {
$(html)animate(
{scrollTop:$(span)offset()top}
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot">底部</a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />

<a href="#" id="top">頂部</a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20519.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.