无Bootstrap实现单页网站Scrollspy功能技术求助

针对你遇到的问题——禁用Bootstrap后无法实现Scrollspy，且点击链接无法平滑滚动到对应板块，这里提供两个原生JS的解决方案，完全不需要依赖任何库，兼容性也很不错：

一、实现点击链接平滑滚动到对应板块 #

你可以用浏览器原生的scrollIntoViewAPI来实现平滑滚动，不需要jQuery。具体步骤如下：

1. 确保你的导航链接（比如contact按钮）的href属性指向目标板块的id，比如<a href="#contact">Contact</a>，同时目标板块要有对应的id：<section id="contact">...</section>
2. 添加以下原生JS代码：

// 监听所有锚点链接的点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault(); // 阻止默认的跳转行为
    
    // 获取目标元素
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    
    // 如果找到目标元素，执行平滑滚动
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth', // 平滑滚动
        block: 'start' // 滚动到板块顶部，可选值还有'center'/'end'
      });
    }
  });
});

这段代码会遍历所有以#开头的链接，点击时阻止默认跳转，然后平滑滚动到目标板块。它的兼容性很好，现代浏览器都支持，完全不需要依赖外部库。

二、实现Scrollspy（滚动监听导航高亮） #

Bootstrap的Scrollspy功能可以用原生JS手动实现，核心思路是监听页面滚动，判断当前视口中的板块，然后给对应的导航链接添加激活样式：

1. 确保每个需要监听的板块都有唯一的id，且导航链接的href对应这些id
2. 添加以下代码：

// 获取所有需要监听的板块和导航链接
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('nav a[href^="#"]');

function updateActiveNav() {
  let currentSection = '';
  
  // 遍历板块，找到当前处于视口中的板块
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    
    // 这里的100是偏移量，可根据你的布局调整，避免刚好到顶部才触发高亮
    if (window.scrollY >= sectionTop - 100 && window.scrollY < sectionTop + sectionHeight - 100) {
      currentSection = section.getAttribute('id');
    }
  });
  
  // 更新导航链接的激活状态
  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${currentSection}`) {
      link.classList.add('active');
    }
  });
}

// 页面加载和滚动时触发导航更新
window.addEventListener('scroll', updateActiveNav);
window.addEventListener('load', updateActiveNav);

3. 别忘了给激活状态的导航链接添加CSS样式，比如：

nav a.active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

这样滚动页面时，当前视口中的板块对应的导航链接就会自动高亮，实现和Bootstrap Scrollspy一样的效果。

针对你提供的代码片段的说明 #

你代码里的<a href="#works"><input ... value="projects"></a>，用上面的平滑滚动代码后，点击这个按钮就会平滑滚动到id="works"的板块。同理，只要你的contact链接设置了href="#contact"，且对应板块有id="contact"，就能实现点击平滑滚动到contact板块的需求。

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