快捷導(dǎo)航

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

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

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

要解決兩個(gè)需求：

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

怎么解決??？很簡單，當(dāng)然是用錨點(diǎn)。

首先在A頁面創(chuàng)建一個(gè)錨點(diǎn)

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

然后在B頁面定義這個(gè)錨點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

OK,成功！既然button能夠成功，那其他的也就好辦了，img，div都可以這么做。

還有一個(gè)方法通過jQuery的aminate動畫方法也可以做，我貼出代碼

<body>
<script type="text/javascript">
function click_scroll() {
var scroll_offset = $("#pos").offset(); //得到pos這個(gè)div層的offset，包含兩個(gè)值，top和left
$("body,html").animate({
scrollTop:scroll_offset.top //讓body的scrollTop等于pos的top，就實(shí)現(xiàn)了滾動
},0);
}
</script>
<input type="button" value="點(diǎn)擊button跳轉(zhuǎn)" onclick="click_scroll();" />...
這里是很多文字，把頁面撐開，撐出滾動條
...
<div id="pos">滾動到這里</div>
隱藏之后滾動到這里
...
再加點(diǎn)文字
...
</body>

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