当一个html网页内容很长的时候,用户在浏览这个网页的时候可能会有些不方便,比如已经滚动到了底部之后想返回到顶部,那么只能拖动滚动条到顶部(或者刷新页面,但这个做法体验不好),效果比较好的方法就是设置锚点来处理这个问题,实现页内或跨页跳转
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基础教程(xxs100.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>锚演示-基础教程xxs100.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>测试看看