一步步写出锚点高亮代码（方案四）

2023-12-01 05:01:20

在网站开发中，我们经常需要用到锚点高亮功能，即当页面滚动到某个锚点时，该锚点会被高亮显示。这可以帮助用户快速找到他们想要的内容，提高用户体验。

实现锚点高亮有很多种方法，这里介绍四种比较常用的方案：

方案一：使用JavaScript和CSS

这是最简单的一种方法，只需要用到JavaScript和CSS。具体步骤如下：

在HTML代码中，为要高亮的锚点添加一个ID属性，例如：

<a id="anchor1">锚点1</a>

在CSS代码中，为锚点添加一个样式，例如：

#anchor1 {
  background-color: yellow;
}

在JavaScript代码中，监听页面滚动事件，并在滚动时判断当前滚动到的锚点，然后为该锚点添加高亮样式。

window.addEventListener('scroll', function() {
  var anchors = document.querySelectorAll('a[id]');
  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    var rect = anchor.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      anchor.classList.add('active');
    } else {
      anchor.classList.remove('active');
    }
  }
});

方案二：使用jQuery

如果您熟悉jQuery，也可以使用jQuery来实现锚点高亮。具体步骤如下：

在HTML代码中，为要高亮的锚点添加一个ID属性，例如：

<a id="anchor1">锚点1</a>

在jQuery代码中，监听页面滚动事件，并在滚动时判断当前滚动到的锚点，然后为该锚点添加高亮样式。

$(window).scroll(function() {
  var anchors = $('a[id]');
  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    var rect = anchor.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= $(window).height()) {
      $(anchor).addClass('active');
    } else {
      $(anchor).removeClass('active');
    }
  }
});

方案三：使用锚点库

网上有很多现成的锚点库，您也可以使用这些库来实现锚点高亮。这里推荐两个比较常用的库：

这些库的使用方法都比较简单，您只需要在页面中引用库文件，然后按照库的文档进行配置即可。

方案四：使用原生HTML和CSS

如果您的项目不需要支持旧版本浏览器，您也可以使用原生HTML和CSS来实现锚点高亮。具体步骤如下：

在HTML代码中，为要高亮的锚点添加一个ID属性，例如：

<a id="anchor1">锚点1</a>

在CSS代码中，为锚点添加一个样式，例如：

#anchor1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#anchor1:hover::before {
  opacity: 1;
}