<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>body {
text-align: center;
}
#go_to {
position: fixed;
right: 10px;
bottom: 10px;
}</style>
<body>
<h3 name="top">唐詩300首</h3>
<p>《春曉》<br/>
作者：孟浩然<br/>
春眠不覺曉，處處聞啼鳥。<br/>
夜來風雨聲，花落知多少。</p>
<p> 《鹿柴》<br/>
作者：王維<br/>
空山不見人，但聞人語響。<br/>
返影入深林，複照青苔上。</p>
<p> 《相思》<br/>
作者：王維<br/>
紅豆生南國，春來發幾枝。<br/>
願君多采撷，此物最相思。</p>
<p> 《雜詩》<br/>
作者：王維<br/>
君自故鄉來，應知故鄉事。<br/>
來日绮窗前，寒梅著花未。</p>
<p> 《終南望餘雪》<br/>
作者：祖詠 <br/>
終南陰嶺秀，積雪浮雲端。<br/>
林表明霁色，城中增暮寒。</p>
<p id="jys"> 《靜夜思》<br/>
作者：李白<br/>
床前明月光，疑是地上霜。<br/>
舉頭望明月，低頭思故鄉。</p>
<p> 《登鹳雀樓》<br/>
作者：王之渙<br/>
白日依山盡，黃河入海流。<br/>
欲窮千裡目，更上一層樓。</p>
<p> 《江雪》<br/>
作者：柳宗元<br/>
千山鳥飛絕，萬徑人蹤滅。<br/>
孤舟蓑笠翁，獨釣寒江雪。</p>
<p> 《登樂遊原》<br/>
作者：李商隐 <br/>
向晚意不适，驅車登古原。<br/>
夕陽無限好，隻是近黃昏。</p>
<p> 《彈琴》<br/>
作者：劉長卿 <br/>
泠泠七弦上，靜聽松風寒。<br/>
古調雖自愛，今人多不彈。</p>
<p> 《八陣圖》<br/>
作者：杜甫<br/>
功蓋三分國，名成八陣圖。<br/>
江流石不轉，遣恨失吞吳。</p>
<p id="cao"> 《草》<br/>
作者：白居易<br/>
離離原上草，一歲一枯榮。<br/>
野火燒不盡，春風吹又生。<br/>
遠芳侵古道，晴翠接荒城。 <br/>
又送王孫去，萋萋滿别情。</p>
<p> 《關山月》<br/>
作者：李白<br/>
明月出天山，蒼茫雲海間。<br/>
長風幾萬裡，吹度玉門關。<br/>
漢下白登道，胡窺青海灣。<br/>
由來征戰地，不見有人還。<br/>
戍客望邊色，思歸多苦顔。<br/>
高樓當此夜，歎息未應閑。</p>
<p> 《望月懷遠》<br/>
作者：張九齡<br/>
海上生明月，天涯共此時。<br/>
情人怨遙夜，竟夕起相思。<br/>
滅燭憐光滿，披衣覺露滋。<br/>
不堪盈手贈，還寝夢佳期。</p>
<p> 《送杜少府之任蜀州》<br/>
作者：王勃<br/>
城阙輔三秦，風煙望五津。<br/>
與君離别意，同是宦遊人。<br/>
海記憶體知己，天涯若比鄰。<br/>
無為在岐路，兒女共沾巾。</p>
<p> 《春望》<br/>
作者：杜 甫<br/>
國破山河在，城春草木深。<br/>
感時花濺淚，恨别鳥驚心。<br/>
烽火連三月，家書抵萬金。<br/>
白頭搔更短，渾欲不勝簪。</p>
<div id="go_to">
<a href="#top">A、頂部</a>
<button onclick="goToTop();">B、頂部</button>
<button onclick="goToJys();">C、靜夜思</button>
<button onclick="goToCao();">D、草</button>
</div>
</body>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">function goToTop() {
location.href = "#top";
}
function goToJys() {
$("html,body").animate({scrollTop: $("#jys").offset().top}, 500);//定位到《靜夜思》
}
function goToCao() {
/**
* 如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，浏覽器實作了一下方法，
* 以友善開發人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollIntoView()
* 作為标準方法。
* scrollIntoView()可以在所有的HTML元素上調用，通過滾動浏覽器視窗或某個容器元素，
* 調用元素就可以出現在視窗中。如果給該方法傳入true作為參數，或者不傳入任何參數，那麼
* 視窗滾動之後會讓調動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數，調用元素
* 會盡可能全部出現在視口中（可能的話，調用元素的底部會與視口的頂部齊平。）不過頂部
* 不一定齊平，例如：
* //讓元素可見
* document.forms[0].scrollIntoView();
* 當頁面發生變化時，一般會用這個方法來吸引使用者注意力。實際上，為某個元素設定焦點也
* 會導緻浏覽器滾動顯示獲得焦點的元素。
* 支援該方法的浏覽器有 IE、Firefox、chrome、Safari和Opera。
*
* 注意這裡要使用querySelector選擇器
* querySelectorAll 在文檔内找第一個符合選擇器描述的節點包括Element本身
* jQuery(element) 在文檔内找第一個符合選擇器描述的節點不包括Element本身
*
*
*/
document.querySelector("#cao").scrollIntoView();
或者
/**
* 這裡需要注意的是這裡的寫法是：$("#cao")[0]，而不是：$("#cao")，
* 因為$('#cao')取得的是一個jQuery對象，而scrollIntoView()是一個DOM
* 屬性，是以要把jQuery對象轉為DOM對象才行，而數組下标可以将jQuery對象
* 轉成對象DOM對象。
*/
$("#cao")[0].scrollIntoView();
}</script>
</html>
<body class="" ontouchstart>
<div class="bc-bg" tabindex="0" data-control="PAGE" id="Page">
<div class="uh bc-head ubb bc-border" data-control="HEADER" id="Header">
<div class="ub">
<div class="nav-btn iconCancel" id="nav-left">
<div class="ub-img1 icon-left ulev2"></div>
</div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0"></h1>
<div class="nav-btn" id="nav-right"></div>
</div>
</div>
<div id="ScrollContent">
<div id="checkboxList"></div>
</div>
</div>
<script src="js/appcan.js"></script>
<script src="js/..."></script>
</body>
function inintReturnBackList(...)
{
$('#checkboxList').html('');
$("#Page")[0].scrollIntoView();
...
}
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)