#作者:矩阵鱼——代码中游泳的咸鱼
前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeeded()新api,来实现元素在界面中的可见。当然也可通过动态设置el.scrollTop的值来控制当前元素的位置,但年某些情况下,前者存在一定的兼容性问题,后者实现相对耗时较长,可采用a标签的锚链接功能,便捷高效。分享几种简单好用的锚链接常规用法:
基本概念:
通俗的讲,我们想要让页面定位到的位置,即为锚点。通过下面的示例代码不难看出,锚点本身就是一种超链接,它指向页面面内部特定的部分。
锚点链接的定位,需要由两个部分组成:
(1)锚点标记,也就是要定位到的位置,我们称为“锚记”;
(2)指向锚记的链接
1、跳转本页面的锚点链接
(1)设置一个锚点:使用a标签name属性表示锚点名称
(2)在超链接的href属性中,使用#+name 跳到指定的锚点位置。
示例;
// 在页面顶部设置锚点
<a></a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> //n多个,模拟DOM中存在的实际内容
// 跳转到锚点位置
<a href="#top"></a>