随着网页的日益普及，网页间的链接也越来越常见。在内部链接中，锚点是一种非常常见的方式，可以使用户方便地跳转到同一页面内的指定位置。JavaScript是一种常用的实现方式，在这篇文章中，我们将从多个方面对JS锚点跳转同一ID进行详细阐述。
一、基本实现
首先，我们需要了解JS锚点跳转的基本实现。其实实现原理很简单，只需要使用跳转所在元素的id作为跳转地址的后缀即可。比如：
<div id="position"></div> <a href="#position">跳转到位置元素</a>
这样，点击链接就能够跳转到指定ID的位置。使用JS实现这个效果也是非常简单的，只需要在点击时加上JS跳转代码就可以了：
document.querySelector('a').onclick = function() {
const element = document.querySelector(this.getAttribute('href'));
element.scrollIntoView({
behavior: 'smooth'
});
return false;
};
代码中首先获取到了链接的目标元素，然后使用scrollIntoView函数将该元素滚动到可视范围内。同时为了让滚动的效果更加平滑，我们还加了一个behavior选项。
二、多种特殊场景
实际应用中，表示需要跳转的位置可能不仅仅只有一个元素ID。接下来，我们将对几种需要特殊处理的场景进行阐述。
1、跳转到顶部
有时候我们可能需要在一定的条件下跳转到页面顶部，在这种情况下我们只需要将href的值设为“#”即可：
<a href="#">回到顶部</a>
JS实现代码如下：
document.querySelector('a').onclick = function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
return false;
};
以实现效果为例，点击这里会立即跳转到顶部。
2、跳转到下一次定位
在一个较长的页面中，用户可能需要多次快速跳转到不同的位置，这时候我们的定位顺序也需要按照跳转的顺序进行调整。接下来我们将演示如何实现这一需求。
首先，我们需要在页面中为每个需要定位到的元素添加一个分类标记，以此来进行正确的排序：
<div id="section-1" class="section"></div> <div id="section-2" class="section"></div> <div id="section-3" class="section"></div> ...
代码中，我们为每个元素加了class名为“section”，以此来进行标记。接下来，我们需要使用JS来实现定位。在每次跳转的时候，都要找到当前视窗内未定位的“section”元素，然后移动到其中第一个即可：
document.querySelector('a').onclick = function() {
const elements = [...document.querySelectorAll('.section:not(.located)')];
if (elements.length === 0) return false;
const element = elements[0];
element.scrollIntoView({
behavior: 'smooth'
});
element.classList.add('located');
return false;
};
代码中，我们首先使用查询器找到所有未定位的“section”元素，并且根据其出现顺序进行排序。然后在获取到第一个未定位元素后，我们为其添加一个“located”类来标记它已经定位过了。
3、跳转到弹窗后定位
当我们需要在打开一个固定位置的弹窗时，可能需要先让定位在弹窗上，而不是在后面的页面上。这种情况下我们需要对锚点定位进行一些改造。
首先，我们需要调整我们的链接，将弹窗地址加入到链接地址中：
<a href="#position-popup@position">打开弹窗并定位</a>
代码中，我们在弹窗地址后面加入了一个“@”符号，以此来区别锚点地址和弹窗地址。
在JS实现中，我们需要对这种链接进行特殊处理，判断是否需要打开弹窗：
document.querySelector('a').onclick = function() {
const link = this.getAttribute('href');
const parts = link.split('@');
if (parts.length === 2) {
const popup = window.open(parts[0]);
popup.addEventListener('load', function() {
const element = popup.document.querySelector(parts[1]);
element.scrollIntoView({
behavior: 'smooth'
});
});
return false;
} else {
const element = document.querySelector(parts[0]);
element.scrollIntoView({
behavior: 'smooth'
});
return false;
}
};
在代码中，我们首先将链接地址和定位地址进行分离，如果定位地址存在则打开一个新窗口，并且在窗口载入完成后使用scrollIntoView函数进行定位。如果不存在，则直接使用之前的定位方式即可。
4、跳转到固定宽高比的图片/视频
在网站中有时候我们需要对图片或视频进行自适应宽高比布局，此时可能需要定位到固定宽高比的元素上。
首先我们需要指定“position”元素的宽高比：
<div id="position" style="padding-bottom: 56.25%"></div>
代码中，我们使用CSS的padding-bottom属性来实现宽高比。
在JS实现中，我们需要先计算出元素的高度，然后再使用scrollIntoView函数进行定位：
document.querySelector('a').onclick = function() {
const element = document.querySelector(this.getAttribute('href'));
const height = element.offsetWidth * 0.5625;
element.style.height = height + 'px';
element.scrollIntoView({
behavior: 'smooth'
});
return false;
};
代码中，我们首先使用offsetWidth计算出宽度，然后再根据宽高比计算出高度，并且将高度设置到元素上。最后再进行滚动定位。
三、总结
在本文中我们从多个方面对JS锚点跳转同一ID进行了详细的阐述。通过本文的介绍，我们能够清晰地了解到如何实现锚点跳转，并且还讲解了几种特殊场景下的实现方法。希望本文能够对广大读者有所帮助！
