前言

有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。

一、 純 html 實現

1. 利用 id 為標記的錨點

這里作為錨點的標簽可以是任意元素。

??跳轉到?id?為?aa?標記的錨點??

-------------分隔線-------------

??a

2. 利用 a 標簽的 name 屬性作為錨點

這里作為錨點的標簽只能是 a 標簽。

??跳轉到?name?為?bb?的?a?標簽錨點??

-------------分隔線-------------

??name?為?bb?的?a?標簽的錨點??bbb

注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(即以 name 為錨點和以 id 為錨點名字相同時)，會將后者作為錨點。

二、 js 實現

1. 利用 scrollTo()

window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

??平滑滾動到?c??

-------------分隔線-------------

??c

「js 部分」:

??var?linkc?=?document.querySelector('#linkc')??var?cc?=?document.querySelector('#cc')??function?to(toEl)?{????//?toEl?為指定跳轉到該位置的DOM節點????let?bridge?=?toEl;????let?body?=?document.body;????let?height?=?0;????????//?計算該?DOM?節點到?body?頂部距離????do?{??????height?+=?bridge.offsetTop;??????bridge?=?bridge.offsetParent;????}?while?(bridge?!==?body)????????//?滾動到指定位置????window.scrollTo({??????top:?height,??????behavior:?'smooth'????})??}??linkc.addEventListener('click',?function?()?{????to(cc)??});

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

??利用?scrollIntoView?跳轉到?d??

-------------分隔線-------------

??ddd

「js 部分」:

??var?dd?=?document.querySelector('#dd')??function?goTo(){????dd.scrollIntoView()??}

注意：此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

html>??????Document????跳轉到以?id?為?aa?標記的錨點?a??

-------------分隔線-------------

??hhh??aa??跳轉到?name?為?bb?的?a?標簽錨點??

-------------分隔線-------------

??name?為?bb?的?a?標簽的錨點??

-------------分隔線-------------

??bb??平滑滾動到?c??

-------------分隔線-------------

??cc??利用?scrollIntoView?跳轉到?d??

-------------分隔線-------------

??dd??

-------------分隔線-------------

??

效果圖：

總結

以上是生活随笔為你收集整理的html button跳转页面_HTML跳转到页面指定位置的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。