首頁 > 開發者 > JavaScript
要解決兩個需求：
一個是從A頁面跳到B頁面，滾動到頁面的任何地方；
第二個是在B頁面內部點擊某個元素，滾動到頁面的任何地方；
怎麼解決啊？很簡單，當然是用錨點。
首先在A頁面建立一個錨點
<body>
<a href="b.html#pos" target="_blank">點擊跳轉</a>
<body>
然後在B頁面定義這個錨點
<body>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<a name="pos">滾動到這裡</a>
...
再加點文字
...
</body>
好，測試，OK！點過去之後是不是“滾動到這裡”出現在了瀏覽器的最上方。
實際的情況經常是製作人員切好的頁面，產品突然說要加個功能，需要滾動到某個地方，但是那個地方是個div，並沒有a錨點，
建立一個錨點的話又會佔據網頁的空間，影響到網頁的版式，這怎麼辦呢？我們建立一個隱藏的錨點試試，隱藏的錨點不佔用空間。
繼續：如果我讓B頁面裡的 <a name="pos">滾動到這裡</a> 不顯示，就是設定display:none; 那麼還能滾動到這裡嗎？ 試試
<body>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<a name="pos" style="display:none;">滾動到這裡</a>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
不妙，IE可以工作，Firefox有點不給面子。
只能換一種思路，給錨點指定一個id能滾動到這裡嗎？ 試試
<body>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<a id="pos">滾動到這裡</a>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
OK,成功！看來換成id是個好辦法，現在把錨點換成div試試
<body>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<div id="pos">滾動到這裡</div>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
OK,成功！ 這樣就解決了問題，不需要插入一個<a></a>錨點，只需要給div加一個id就行了。
接下來解決第二個需求，在B頁面內部點擊某個元素，滾動到指定位置。
首先，在B.html頂部建立一個錨點，指向要滾動的那個div
<body>
<a href="#pos">點擊這裡本頁跳轉</a>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<div id="pos">滾動到這裡</div>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
OK,成功！那如果要點擊一個button按鈕滾動到指定位置呢？ button按鈕不能添加href， 只能曲折解決。
先建立一個隱藏的錨點，然後點擊button按鈕的時候加一個onclick事件，然後通過js來調用錨點的click事件，曲線救國。
<body>
<script type="text/javascript">
function click_scroll() {
document.getElementById("anchor_scroll").click();
}
</script>
<input type="button" value="點擊button跳轉" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" style="display:none">點擊這裡本頁跳轉</a>
...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<div id="pos">滾動到這裡</div>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
OK,成功！既然button能夠成功，那其他的也就好辦了，img，div都可以這麼做。
還有一個方法通過jQuery的aminate動畫方法也可以做，我貼出代碼
<body>
<script type="text/javascript">
function click_scroll() {
var scroll_offset = $("#pos").offset(); //得到pos這個div層的offset，包含兩個值，top和left
$("body,html").animate({
scrollTop:scroll_offset.top //讓body的scrollTop等於pos的top，就實現了滾動
},0);
}
</script>
<input type="button" value="點擊button跳轉" onclick="click_scroll();" />...
這裡是很多文字，把頁面撐開，撐出捲軸
...
<div id="pos">滾動到這裡</div>
隱藏之後滾動到這裡
...
再加點文字
...
</body>
OK,成功！這個方法有個好處，就是控制滾動的速度，上面的藍色的0就是控制速度的，0是立即的意思，那設為1000試試，
可以看到是慢慢的滾動到了pos，如果設為5000呢，就會更慢了。
為什麼會這樣呢？因為jQuery的animate本來就是做動畫用的，更多功能可以詳細研究了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
