js，jquery滾動/跳轉頁面到指定位置的實現思路

2019-11-20 14:57:01

字體：大中小

來源：轉載

供稿：網友

要解決兩個需求：

一個是從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本來就是做動畫用的，更多功能可以詳細研究了。