什么是锚点

锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接，运用相当普遍。
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

如何创建锚点

同一页面
如下图，需要点击左侧目录单定位到相应的位置

<a :href="'#'XXX">点击</a>
<a :id="XXX">目标位置</a>

通过id 或者name绑定点击时要挑战的位置，id相对兼容一些

不同页面
在不同页面中，锚点定位在c.html中，从另外一个页面的链接跳转到这个锚点

 <a href="c.html#xxx">跳转到c页面</a>
c页面中  <a :id="XXX">目标位置</a> // XXX为锚点名称

js
通过点击触发js事件，js事件中处理跳转到目标位置
第一种方法：通过出发点击事件

<a href="#" onclick="add">跳转到c页面</a>
<a :id="XXX">目标位置</a>
add（）{
1.location.href = "#XXX";      // XXX为锚点名称
2、window.location.hash = "#XXX"; // XXX为锚点名称
}

第二种方法：scrollIntoView

<a href="#" onclick="document.getElemetnById('XXX').scrollIntoView(true);return false;">跳转到c页面</a>
<a :id="XXX">目标位置</a> // XXX为锚点名称

HTML 锚点的作用及用法相关推荐

PreTranslateMessage作用和用法
PreTranslateMessage作用和用法 PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗体的消息都要通过这里,比較经常使用,当 ...
java package作用_java import、package作用与用法
java import.package作用与用法有些人写了一阵子Java,可是对於Java 的package 跟import 还是不太了解很多人以為原始码 .java 档案中的import 会让编译 ...
MySQL数据类型中DECIMAL的作用和用法
在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都有各自的作用,下面我们就主要来介绍一下MySQL数据类型中的DECIMAL类型的作用和用法. 一般赋予浮 ...
php中pre标签,html中pre标签与code标签的作用与用法
HTML 标签定义和用法 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. 标签的一个常见应用就是用来表示计算机的源代码. 可以导致 ...
PHP中的常见魔术方法功能作用及用法实例
这篇文章主要介绍了PHP中的常见魔术方法功能作用及用法实例,本文讲解了构造函数和析构函数__construct()和__desctruct()以及属性重载(Property Overloading)_ ...
、简述global关键字的作用_在C#编程中global关键字的作用及其用法
在C#编程中,global 是 C# 2.0 中新增的关键字,理论上说,如果代码写得好的话,根本不需要用到它.今天就为大家展示下global关键字的作用及其用法,希望对大家学习C#编程有所帮助. 假设 ...
chrome中Blackbox Script 黑盒脚本作用及用法
chrome中Blackbox Script 黑盒脚本作用及用法 Blackbox Script功能每天前端人员在调试代码的时候,都可能会遇到代码调试着会进入第三方库文件,带来很多没必要的调试,不方 ...
C#中using关键字的作用及其用法(转)
C#中using关键字的作用及其用法 using的用途和使用技巧. using关键字微软MSDN上解释总共有三种用途: 1.引用命名空间. 2.为命名空间或类型创建别名. ...
Vue 中的 v-cloak 作用及用法
v-cloak 的作用和用法用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

HTML 锚点的作用及用法

什么是锚点

如何创建锚点

HTML 锚点的作用及用法相关推荐

最新文章

热门文章