如何不使用href属性实现点击导航栏跳转至页面指定section位置

实现方案 #

不需要给a标签添加href属性，通过给动态生成的导航元素绑定点击事件，配合浏览器原生scrollIntoView()API即可实现点击跳转对应区域的效果，修改后的代码如下：

function liCreation() {
  for(noOfSection of noOfsections) {
    const sectionAddress = noOfSection.getAttribute('data-nav');
    const sectionId = noOfSection.getAttribute('id');
    const liTag = document.createElement('li');
    const aTag = document.createElement('a');
    
    aTag.className = 'menu__link';
    aTag.textContent = sectionAddress;
    // 存储对应区域的id到自定义属性
    aTag.dataset.target = sectionId;

    // 绑定点击跳转逻辑
    aTag.addEventListener('click', () => {
      const targetEle = document.getElementById(sectionId);
      targetEle && targetEle.scrollIntoView({
        behavior: 'smooth', // 平滑滚动效果，不需要可删除
        block: 'start' // 滚动后区域顶部对齐视口顶部，可改为center实现居中对齐
      });
    });

    liTag.appendChild(aTag);
    // 请将下方选择器替换为你导航栏ul容器的实际选择器
    document.querySelector('.nav__list').appendChild(liTag);
  }
}

注意事项 #

• 原代码中缺少将生成的li元素插入到导航栏DOM容器的逻辑，上述代码已经补充，你需要将.nav__list替换为你实际导航栏ul的选择器。
• 不需要平滑滚动效果的话，直接删除scrollIntoView的参数，改成targetEle.scrollIntoView()即可，基础功能兼容所有主流浏览器。

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