HTML中锚点的使用

  • 说到锚点,我们也许会需要稍微的思考一下,什么是锚点?

官方的答案是这样的: 
这里写图片描述

  • 那么你可能就会有下面的疑问,锚点能做什么啊?

回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。

  • 还有就是怎么在实际的开发中使用锚点呢?

下面先看一个简单的代码展示吧,为了演示出实际浏览网页时对一个超长网页的模拟,我故意添加了一些段落。:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>锚点的使用</title>
    </head>

    <body>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor1">这里是锚点1</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor2">这里是锚点2</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor3">这里是锚点3</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
    </body>

</html>
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 接下来就是在实际中对锚点的测试了。测试的方法是在超链接的后面跟上”#anchor_idNumber“.井号后面的字母就是我们设计好的锚点的name值。如:http://127.0.0.1:8020/CSS_Study/anchor.html#anchor3

  • 结果如下: 
    这里写图片描述 
    我们可以发现,网页直接就跳到了我们想要进行访问的锚点的定义的位置。因此我们的关于锚点的测试便成功的完成了。


补充:也可以在当前页面中,设置a标签,将href属性的值设置Wie"#AnchorName" 来通过点击当前链接跳转到锚点位置(比如完成"到底部","回顶部"等功能)

### 实现和使用 Element Plus 功能 #### 阻止默认事件以确保正常工作 当 Vue 项目的路由模式设置为 hash 模式时,Element Plus 的 Anchor 组件可能会遇到问题。这是因为链接会触发 URL 变化并影响路由行为[^3]。 为了避免这种情况发生,可以在模板中给 `<el-anchor>` 添加 `@click` 事件监听器来阻止默认的行为: ```html <el-anchor ref="anchor" @click="handleClickAnchor"> </el-anchor> ``` 对应的 JavaScript 方法如下所示: ```javascript methods: { handleClickAnchor(event) { event.preventDefault(); } } ``` 通过这种方式可以防止时改变浏览器地址栏中的路径,从而保持正常的页面导航逻辑。 #### 结合与折叠面板实现平滑滚动效果 如果希望在击某个特定 ID 或名称的链接后不仅能够打开相应的折叠面板而且还能让视图平稳地移动到该位置,则可以通过下面的方法完成操作: 定义处理函数用于接收传入的关键字参数,并据此控制要显示的内容区段以及执行平滑滚动动作: ```javascript const handleSelect = (key) => { activeNames.value = [key]; // 展开指定面板 const element = document.getElementById(key); if (element !== null && typeof(element.scrollIntoView) === 'function') { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }; ``` 上述代码片段展示了如何利用原生 DOM API 来找到对应元素并通过调用其 `.scrollIntoView()` 方法达到视觉上的顺滑过渡体验[^2]。 #### 完整示例:创建带有支持的折叠面板 为了更好地理解整个过程,这里给出一个完整的例子说明怎样在一个应用里集成这些特性: HTML部分: ```html <div id="app"> <el-menu :default-active="activeName" mode="horizontal" @select="handleSelect"> <!-- 假设有多个菜单项 --> <el-menu-item index="section1">Section One</el-menu-item> <el-menu-item index="section2">Section Two</el-menu-item> </el-menu> <el-collapse v-model="activeNames"> <el-collapse-item title="Title of Section One" name="section1" id="section1"> Content for section one... </el-collapse-item> <el-collapse-item title="Title of Section Two" name="section2" id="section2"> Content for section two... </el-collapse-item> </el-collapse> <el-anchor class="custom-anchor"></el-anchor> <!-- 自定义样式类名可选 --> </div> ``` JavaScript/TypeScript 部分(Vue Composition API 方式): ```typescript import { defineComponent, reactive, toRefs } from 'vue'; export default defineComponent({ setup() { let state = reactive({ activeName: '', activeNames: [] }); function handleSelect(key){ state.activeNames = key; setTimeout(() => { const el = document.querySelector(`#${key}`); if(el != undefined){ el.scrollIntoView({behavior:'smooth'}); } }, 0); } return {...toRefs(state), handleSelect }; }, }); ``` 此实例演示了如何将顶部水平菜单作为链接列表,并且每次选择不同的选项卡都会更新当前激活的状态变量 (`state.activeNames`) 同时使相应区域进入视野范围内的动画效果.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值