快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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)擊這里本頁(yè)跳轉(zhuǎn)</a>
...
這里是很多文字，把頁(yè)面撐開(kāi)，撐出滾動(dòng)條
...
<div id="pos">滾動(dòng)到這里</div>
隱藏之后滾動(dòng)到這里
...
再加點(diǎn)文字
...
</body>

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

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

<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)了滾動(dòng)
},0);
}
</script>
<input type="button" value="點(diǎn)擊button跳轉(zhuǎn)" onclick="click_scroll();" />...
這里是很多文字，把頁(yè)面撐開(kāi)，撐出滾動(dòng)條
...
<div id="pos">滾動(dòng)到這里</div>
隱藏之后滾動(dòng)到這里
...
再加點(diǎn)文字
...
</body>

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