js如何实现导航栏跳转

使用HTML锚点实现跳转

在HTML中设置锚点，通过<a>标签的href属性指向目标元素的id。

<a href="#section1">跳转到第一节</a>
<div id="section1">这里是第一节内容</div>

通过JavaScript的scrollIntoView方法

获取目标元素并调用scrollIntoView实现平滑滚动。

document.querySelector('#section1').scrollIntoView({ behavior: 'smooth' });

监听点击事件手动跳转

为导航栏按钮绑定点击事件，动态计算目标位置并修改scrollTop。

const navButton = document.querySelector('#navButton');
navButton.addEventListener('click', () => {
  const target = document.querySelector('#targetSection');
  window.scrollTo({ top: target.offsetTop, behavior: 'smooth' });
});

使用location.hash更新URL

跳转时同步更新浏览器地址栏的哈希值。

window.location.hash = 'section1'; // URL会变为#section1

结合框架实现（如React/Vue）

在React中可通过useRef获取DOM节点：

import { useRef } from 'react';
const sectionRef = useRef();
const scrollToSection = () => sectionRef.current.scrollIntoView();
return <div ref={sectionRef}>内容</div>;

注意事项

• 平滑滚动需浏览器支持behavior: 'smooth'，否则需引入polyfill。
• 动态加载内容需确保目标元素存在后再跳转。
• 框架项目中优先使用路由库（如React Router）处理页面间跳转。