當一個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>測試看看 ?/?
(一)、頁面內跳轉設置方法一:
設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
在頁面中需要的位置設置錨點<a name="miao"></a>;(注意:a標簽中要寫一個name屬性,屬性值要與[1]中的href的屬性值一樣,不加#)標簽中按需填寫相應的文字,一般不寫內容。
(二)、頁面內跳轉設置方法2:
設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
設置錨點的位置 <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>測試看看 ?/?