HTML 錨點

當一個html網頁內容很長的時候,用戶在瀏覽這個網頁的時候可能會有些不方便,比如已經滾動到了底部之后想返回到頂部,那么只能拖動滾動條到頂部(或者刷新頁面,但這個做法體驗不好),效果比較好的方法就是設置錨點來處理這個問題,實現(xiàn)頁內或跨頁跳轉

示例演示錨點

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>基礎教程(cainiaoplus.com),錨點設置</title></head><body>
     <a href="#bottom" name="top">去底部</a>
    <div style="height: 5000px; width: 300px; background-color: #123">這里演示如何跳轉到頁面頭部和底部</div>
    <a href="#top" name="bottom">回到頂部</a></body></html>
測試看看 ?/?

如何設置錨點

(一)、頁面內跳轉設置方法一:

  1. 設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)

  2. 在頁面中需要的位置設置錨點<a name="miao"></a>;(注意:a標簽中要寫一個name屬性,屬性值要與[1]中的href的屬性值一樣,不加#)標簽中按需填寫相應的文字,一般不寫內容。

(二)、頁面內跳轉設置方法2:

  1. 設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)

  2. 設置錨點的位置  <h4 id="miao">喵星人基地</h4>;在要跳轉到的位置的標簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#  

    注意:方法二不用單獨添加一個a標簽來專門設置錨點 ,只在需要的位置的標簽中添加一個id即可。

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>錨演示-基礎教程(cainiaoplus.com)</title>
</head>
<body>
    <ul>
        <li><a href="#miao">去找喵星人</a></li>
        <li><a href="#wang">去找汪星人</a></li>
        <li><a href="#meng">其他萌物</a></li>
    </ul>

    <a name="miao"></a><!--設置錨點方法1-->
    <h3 id="miao">喵星人基地</h3><!--設置錨點方法2-->
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    
    <a name="wang"></a>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>

    <a name="meng"></a>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
</body>
</html>
測試看看 ?/?
丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清