js,jquery滾動/跳轉頁面到指定位置

要解決兩個需求:
一個是從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可以工作,火狐有點不給面子。
只能換一種思路,給錨點指定一個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本來就是做動畫用的,更多功能可以詳細研究了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章