HTML跳轉(zhuǎn)到頁(yè)面指定位置的幾種方法

言

有時(shí)候，我們想閱讀頁(yè)面中某段精彩的內(nèi)容，但由于頁(yè)面太長(zhǎng)，用戶(hù)需要自己滾動(dòng)頁(yè)面，查找起來(lái)非常麻煩，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁(yè)面指定位置，方便用戶(hù)的閱讀。

一、純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。

  <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。

  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <div id="abb">bbb</div>

注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會(huì)將后者作為錨點(diǎn)。

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

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

話不多說(shuō)，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計(jì)算該 DOM 節(jié)點(diǎn)到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動(dòng)到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

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

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開(kāi)發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

動(dòng)距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來(lái)訪問(wèn)根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

第二個(gè)屬性是對(duì)HTML頁(yè)面的特殊擴(kuò)展,提供了對(duì)<body>標(biāo)簽的直接訪問(wèn)(body標(biāo)記)。

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫(xiě)法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區(qū)尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫(xiě)法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動(dòng)條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫(xiě)法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動(dòng)條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經(jīng)支持documentElement對(duì)象的各種屬性, 而

以上兼容性寫(xiě)法不影響所獲的屬性值

編寫(xiě)自定義函數(shù)：

// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動(dòng)條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動(dòng)條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對(duì)JavaScript獲取窗口寬度和高度的影響

寫(xiě)CSS的常用套路（下篇）...

點(diǎn)擊觀看——我寫(xiě)CSS的常用套路（上篇）...

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會(huì)使陰影更加絲滑

本demo地址：Pagination

內(nèi)發(fā)光

注意到box-shadow還有個(gè)inset，用于盒子內(nèi)部發(fā)光

利用這個(gè)特性我們可以在盒子內(nèi)部的某個(gè)范圍內(nèi)設(shè)定顏色，做出一個(gè)新月形

再加點(diǎn)動(dòng)畫(huà)和濾鏡效果，“猩紅之月”閃亮登場(chǎng)！

注意到它散發(fā)著淡淡的紅光，其實(shí)就是2個(gè)偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質(zhì)上和box-shadow相同，只不過(guò)是相對(duì)于文本而言，常用于文本發(fā)光，也可通過(guò)多層疊加來(lái)制作霓虹文本和偽3D文本等效果

發(fā)光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來(lái)和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強(qiáng)的色彩效果，甚至可以用來(lái)模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個(gè)作品用到了HTML的dialog標(biāo)簽，線性漸變背景，動(dòng)畫(huà)以及overflow障眼法，細(xì)心的你看出來(lái)了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個(gè)橢圓形的徑向漸變

此外，由于背景可以疊加，我們可以疊加多個(gè)不同位置大小的徑向漸變來(lái)生成圓點(diǎn)群，再加上動(dòng)畫(huà)就產(chǎn)生了一種微粒效果，無(wú)需多余的div元素

本demo地址：Particle Button

conic-gradient

圓錐漸變可以用于制作餅圖

用一個(gè)偽元素疊在餅圖上面，并將content設(shè)為某個(gè)值（這個(gè)值通過(guò)CSS變量計(jì)算出來(lái)），就能制作出度量計(jì)的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，blur最常用

融合效果

當(dāng)blur濾鏡和contrast濾鏡一起使用時(shí)，會(huì)產(chǎn)生一種融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

對(duì)背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實(shí)現(xiàn)文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規(guī)則形狀。如果和動(dòng)畫(huà)結(jié)合也會(huì)相當(dāng)有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以將多個(gè)文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯(cuò)動(dòng)畫(huà)，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分

鏤空效果

雖然clip-path能裁切出形狀，但它無(wú)法鏤空，因?yàn)樾螤畹睦锩嫠懿恢?/p>

可能有人（包括我）會(huì)用偽元素來(lái)“模擬”鏤空（通過(guò)設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個(gè)背景或浮在圖片上就會(huì)暴露出來(lái)，這時(shí)我們就要求助于遮罩了

假設(shè)，你想制作一個(gè)空心的圓環(huán)，那么你只需將一個(gè)徑向漸變作為元素的遮罩，并且第一個(gè)color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因?yàn)檎谡值亩x就是只顯示遮罩圖片非透明的部分

注意：為了消除鋸齒，這個(gè)徑向漸變的中間需要有一個(gè)額外的color-stop用于緩沖，長(zhǎng)度設(shè)置為原長(zhǎng)度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強(qiáng)的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個(gè)CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情

那么何時(shí)用它呢？當(dāng)CSS動(dòng)畫(huà)中有屬性無(wú)法從CSS中獲取時(shí)，自然就會(huì)使用到它了

跟蹤鼠標(biāo)的位置

目前CSS還尚未有獲取鼠標(biāo)位置的API，因此考慮用JS來(lái)進(jìn)行

通過(guò)查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽(tīng)鼠標(biāo)事件的API中，可通過(guò)e.clientX和e.clientY來(lái)獲得鼠標(biāo)當(dāng)前的位置

既然能夠獲取鼠標(biāo)的位置，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過(guò)監(jiān)聽(tīng)mouseenter和mouseleave事件，來(lái)獲取鼠標(biāo)出入一個(gè)元素時(shí)的位置，并用此坐標(biāo)來(lái)當(dāng)作鼠標(biāo)的位移距離，監(jiān)聽(tīng)mousemove事件，來(lái)獲取鼠標(biāo)在元素上移動(dòng)時(shí)的位置，同樣地用此坐標(biāo)來(lái)當(dāng)作鼠標(biāo)的位移距離，這樣一個(gè)跟蹤鼠標(biāo)的效果就實(shí)現(xiàn)了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過(guò)這套接口來(lái)擴(kuò)展CSS的功能

讓漸變動(dòng)起來(lái)

目前來(lái)說(shuō)，我們無(wú)法直接給漸變添加動(dòng)畫(huà)，因?yàn)闉g覽器不理解要改變的值是什么類(lèi)型

這時(shí)，我們就可以利用CSS.registerProperty()來(lái)注冊(cè)我們的自定義變量，并聲明其語(yǔ)法類(lèi)型（syntax）為顏色類(lèi)型<color>，這樣瀏覽器就能理解并對(duì)顏色應(yīng)用插值方法來(lái)進(jìn)行動(dòng)畫(huà)

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來(lái)制作餅圖，那么我們能不能讓餅圖動(dòng)起來(lái)呢？答案是肯定的，定義三個(gè)變量：--color1、--color2和--pos，其中--pos的語(yǔ)法類(lèi)型為長(zhǎng)度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會(huì)順時(shí)針旋轉(zhuǎn)出現(xiàn)

利用絕對(duì)定位和層疊上下文，我們可以疊加多個(gè)從小到大的餅圖，再給它們?cè)O(shè)置不同的顏色，應(yīng)用交錯(cuò)動(dòng)畫(huà)，就有了下面這個(gè)炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯(cuò)動(dòng)畫(huà)和偽類(lèi)偽元素結(jié)合起來(lái)寫(xiě)出來(lái)的慎重勇者風(fēng)格的菜單

本demo地址：Shinchou Menu

在線咨詢(xún)

上一篇：常見(jiàn)的css3圖片hover懸浮效果都在這了，一共15種
下一篇：CSS這些書(shū)寫(xiě)規(guī)范你知道嗎？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML跳轉(zhuǎn)到頁(yè)面指定位置的幾種方法

言

一、 純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

2. 利用 scrollIntoView()

box-shadow

內(nèi)發(fā)光

text-shadow

發(fā)光文本

霓虹文本

偽3D文本

background-clip:text

gradient

linear-gradient

radial-gradient

conic-gradient

filter

融合效果

backdrop-filter

mix-blend-mode

clip-path

故障效果

mask

鏤空效果

-webkit-box-reflect

web animations

跟蹤鼠標(biāo)的位置

CSS Houdini

讓漸變動(dòng)起來(lái)

彩蛋

您的項(xiàng)目需求

一、純 html 實(shí)現(xiàn)