欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

如何在网页中添加有效的锚点链接

最编程 2024-08-02 14:52:04
...

来来来,我们来聊聊项目的新需求。
一个团队介绍页面,初始展现为全部人员,标题分为全部成员和创作团队,行政团队等。
点击创作团队时,要求在当前页面跳转到创作团队,点击全部成员时跳转到第一行人员介绍处。
我的初始思路是获取每个团队人员介绍的位置,触发点击事件时,可以跳转到相应位置。然后就开始各种查资料,试图用各种方法解决这个平滑滑动的效果。
两个小时过去了,各种配置各种安装,写了N个bug之后,无奈求助,发现,思路错了!
有个非常简单的方法可以实现这个效果。
那就是 HTML5 的锚点。

首先,来聊聊锚点是什么。

你还记得HTML中的a标签吗?

概念:<a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。
但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话,可以作为原本链接位置的占位符,常用于home链接。

[注意]任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮、链接等)

href属性表示地址,有三种情况:
1.链接地址

<a href="http://www.baidu.com">百度</a>

2.下载地址

<a href="test.zip">下载测试</a>

3.锚点
(1)href:#id名

<a href="#test">目录</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>

(2)href:页面地址#id名

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

注意:href属性不要留空,若暂时不需要写地址,就写#或者JavaScript:;因为如果href 留空,会刷新页面。

写完这些,大牛们恐怕已经看得很不耐烦,基础不错的小伙伴们应该也恍然大悟了,至于一头雾水的,继续看下面实例吧。

对我描述的需求一头雾水的,不耐烦看的,感兴趣的可以直接复制代码,试一下就明白了,拿走不谢。

一、页面内跳转的锚点设置
    页面内的跳转需要两步:

    方法一:

    ①:设置一个锚点链接<a href="#libai">我是李白</a>;(注意:href属性的属性值最前面要加#)

    ②:在页面中需要的位置设置锚点<a name="libai"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容

    方法二:

    ①:同方法一的①

    ②:设置锚点的位置  <h3 id="libai">我是李白</h3>;在要跳转到的位置的标签中添加一个id属性,属性值与①中href的属性值一样,不加#

    方法二不用单独添加一个a标签来专门设置锚点 ,只在需要的位置的标签中添加一个id即可。

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>我是诗人锚点</title>
</head>
<body>
    <ul>
        <li><a href="#libai">我是李白</a></li>
        <li><a href="#dufu">我是杜甫</a></li>
        <li><a href="#baijuyi">我是白居易</a></li>
    </ul>

    <a name="libai"></a><!--设置锚点方法1-->
    <h3 id="libai">我是李白</h3><!--设置锚点方法2-->
    <p>我是李白~</p>
    <p>我是李白~</p>
    <p>我是李白~</p>
    <p>我是李白~</p>
    <p>我是李白~</p>
    <p>我是李白~</p>
    <p>我是李白~</p>


    <h3 id="dufu">我是杜甫</h3><!--设置锚点方法2-->
    <a name="dufu"></a>
    <p>我是杜甫~</p>
    <p>我是杜甫~</p>
    <p>我是杜甫~</p>
    <p>我是杜甫~</p>
    <p>我是杜甫~</p>
    <p>我是杜甫~</p>


    <h3 id="dufu">我是白居易</h3><!--设置锚点方法2-->
    <a name="baijuyi"></a>
    <p>我是白居易~</p>
    <p>我是白居易~</p>
    <p>我是白居易~</p>
    <p>我是白居易~</p>
    <p>我是白居易~</p>
    <p>我是白居易~</p>
</body>
</html>

推荐阅读