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）处理页面间跳转。
