快捷導(dǎo)航

js，jquery滾動/跳轉(zhuǎn)頁面到指定位置的實現(xiàn)思路

更新時間：2014年06月03日 11:15:36 作者：

這篇文章主要介紹了如何通過js或jquery滾動/跳轉(zhuǎn)頁面到指定位置,需要的朋友可以參考下

要解決兩個需求：

一個是從A頁面跳到B頁面，滾動到頁面的任何地方；
第二個是在B頁面內(nèi)部點擊某個元素，滾動到頁面的任何地方；

怎么解決?。亢芎唵?，當(dāng)然是用錨點。

首先在A頁面創(chuàng)建一個錨點

<body>
<a href="b.html#pos" target="_blank">點擊跳轉(zhuǎn)</a>
<body>

然后在B頁面定義這個錨點

<body>
...
這里是很多文字，把頁面撐開，撐出滾動條
...
<a name="pos">滾動到這里</a>
...
再加點文字
...
</body>

好，測試，OK！點過去之后是不是“滾動到這里”出現(xiàn)在了瀏覽器的最上方。
實際的情況經(jīng)常是制作人員切好的頁面，產(chǎn)品突然說要加個功能，需要滾動到某個地方，但是那個地方是個div，并沒有a錨點，
創(chuàng)建一個錨點的話又會占據(jù)網(wǎng)頁的空間，影響到網(wǎng)頁的版式，這怎么辦呢？我們創(chuàng)建一個隱藏的錨點試試，隱藏的錨點不占用空間。

繼續(xù)：如果我讓B頁面里的 <a name="pos">滾動到這里</a> 不顯示，就是設(shè)定display:none; 那么還能滾動到這里嗎？試試

<body>
...
這里是很多文字，把頁面撐開，撐出滾動條
...
<a name="pos" style="display:none;">滾動到這里</a>
隱藏之后滾動到這里
...
再加點文字
...
</body>

不妙，IE可以工作，火狐有點不給面子。
只能換一種思路，給錨點指定一個id能滾動到這里嗎？試試

<body>
...
這里是很多文字，把頁面撐開，撐出滾動條
...
<a id="pos">滾動到這里</a>
隱藏之后滾動到這里
...
再加點文字
...
</body>

OK,成功！看來換成id是個好辦法，現(xiàn)在把錨點換成div試試

<body>
...
這里是很多文字，把頁面撐開，撐出滾動條
...
<div id="pos">滾動到這里</div>
隱藏之后滾動到這里
...
再加點文字
...
</body>

OK,成功！這樣就解決了問題，不需要插入一個<a></a>錨點，只需要給div加一個id就行了。

接下來解決第二個需求，在B頁面內(nèi)部點擊某個元素，滾動到指定位置。
首先，在B.html頂部創(chuàng)建一個錨點，指向要滾動的那個div

<body>
<a href="#pos">點擊這里本頁跳轉(zhuǎn)</a>
...
這里是很多文字，把頁面撐開，撐出滾動條
...
<div id="pos">滾動到這里</div>
隱藏之后滾動到這里
...
再加點文字
...
</body>

OK,成功！那如果要點擊一個button按鈕滾動到指定位置呢？ button按鈕不能添加href，只能曲折解決。
先建立一個隱藏的錨點，然后點擊button按鈕的時候加一個onclick事件，然后通過js來調(diào)用錨點的click事件，曲線救國。

<body>
<script type="text/javascript">
function click_scroll() {
document.getElementById("anchor_scroll").click();
}
</script>
<input type="button" value="點擊button跳轉(zhuǎn)" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" style="display:none">點擊這里本頁跳轉(zhuǎn)</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，就實現(xiàn)了滾動
},0);
}
</script>
<input type="button" value="點擊button跳轉(zhuǎn)" onclick="click_scroll();" />...
這里是很多文字，把頁面撐開，撐出滾動條
...
<div id="pos">滾動到這里</div>
隱藏之后滾動到這里
...
再加點文字
...
</body>

OK,成功！這個方法有個好處，就是控制滾動的速度，上面的藍(lán)色的0就是控制速度的，0是立即的意思，那設(shè)為1000試試，
可以看到是慢慢的滾動到了pos，如果設(shè)為5000呢，就會更慢了。
為什么會這樣呢？因為jQuery的animate本來就是做動畫用的，更多功能可以詳細(xì)研究了。