溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用CSS錨點

發(fā)布時間：2020-07-14 15:28:47 來源：億速云 閱讀：140 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)如何使用CSS錨點，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

CSS錨點使用有兩種方法，我建議使用下面這種：

  <a href='#one'>到達第一個錨點</a>
    <a href='#two'>到達第二個錨點</a>
    <p id='one'>我是第一個錨點</p>
    <p id='two'>我是第一個錨點</p>

這樣當(dāng)我們點擊A鏈接時， 對應(yīng)的DOM節(jié)點就會滾動到窗口頂部。

但有時我們的需求并不是讓它滾動到窗口頂部。 可能要他距離頂部有一定的距離。這時候可以由以下方法解決。

  <a href='#one'>到達第一個錨點</a>
    <a href='#two'>到達第二個錨點</a>
    <p id='one' style='margin:top:-100px;padding-top:100px'>
 <p >我是第一個需要滾動的內(nèi)容</p>
   <p id='two' style='margin:top:-100px;padding-top:100px'>
    <p >我是第二個需要滾動的內(nèi)容</p>

這樣就可以達到滾動后距離頂部200px的效果。而不影響原頁面的樣式

看完上述內(nèi)容，你們對如何使用CSS錨點有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手