前端如何实现页面划到哪一块锚点导航栏那一块高亮

实现页面划到哪一块锚点导航栏那一块高亮可以通过以下步骤实现：

给每个页面的不同部分添加唯一的id属性，作为锚点的目标。例如：

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>

创建一个导航栏，其中的每个导航链接都指向对应的锚点。例如：

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

使用JavaScript来监听页面滚动事件，判断当前滚动到哪个锚点，并添加高亮样式到对应的导航链接。例如：

window.addEventListener('scroll', function() {
  var sections = document.querySelectorAll('section');
  var navLinks = document.querySelectorAll('nav a');

  sections.forEach(function(section, index) {
    var sectionTop = section.offsetTop;
    var sectionHeight = section.offsetHeight;
    var scrollPos = window.scrollY;

    if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
      navLinks[index].classList.add('active');
    } else {
      navLinks[index].classList.remove('active');
    }
  });
});

根据需要，可以使用CSS来定义高亮样式。例如：

nav a.active {
  color: red;
  font-weight: bold;
}

这样，当页面滚动到某个锚点时，对应的导航链接就会添加高亮样式，从而实现页面划到哪一块锚点导航栏那一块高亮的效果