如何在同一HTML文件的a标签href中关联class类名

方案1：原生HTML实现（无需JS，最优方案） #

HTML页内锚点跳转默认通过元素的id属性关联，而非class，仅需两步修改即可实现需求：

1. 给带projects类的内容 div 新增id="projects"属性
2. 把导航a标签的href属性值修改为#projects

修改后的导航项代码 #

<li class="nav-item">
     <a class="nav-link" href="#projects">Projects</a>
</li>

修改后的项目模块代码 #

<div class="projects" id="projects">
      <h4>--Projects--</h4>
       .....
</div>

如果需要实现平滑滚动效果，在全局CSS中添加如下代码即可：

html {
  scroll-behavior: smooth;
}

方案2：仅通过class绑定跳转（需JS实现） #

如果你确实不想给内容模块新增id属性，可以通过JS监听点击事件实现跳转：
首先给导航a标签添加自定义属性标识目标类：

<li class="nav-item">
     <a class="nav-link" href="javascript:void(0)" data-target-class="projects">Projects</a>
</li>

再添加对应的JS逻辑：

document.querySelector('.nav-link[data-target-class="projects"]').addEventListener('click', function() {
  const targetEle = document.querySelector('.projects');
  if(targetEle) {
    // 传入参数可开启平滑滚动
    targetEle.scrollIntoView({behavior: 'smooth'});
  }
})

内容的提问来源于stack exchange，提问作者Amelia