js锚点定位算法实现
锚点定位算法的实现方法
滚动到指定元素
使用Element.scrollIntoView()方法可以轻松实现锚点定位。该方法接受一个配置对象参数，用于控制滚动行为：
document.getElementById('targetElement').scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 垂直对齐方式
});获取元素位置手动滚动
通过getBoundingClientRect()获取目标元素位置，结合window.scrollTo()实现更灵活的控制：
const element = document.querySelector('#target');
const rect = element.getBoundingClientRect();
window.scrollTo({
top: rect.top + window.pageYOffset,
behavior: 'smooth'
});基于hash的路由锚点
监听URL hash变化实现传统锚点定位：
window.addEventListener('hashchange', () => {
const id = window.location.hash.substr(1);
if (id) document.getElementById(id)?.scrollIntoView();
});平滑滚动动画实现
自定义平滑滚动动画函数：
function smoothScrollTo(target) {
const start = window.pageYOffset;
const distance = target - start;
const duration = 500;
let startTime = null;
function animation(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
window.scrollTo(0, start + distance * easeInOutQuad(progress));
if (progress < 1) requestAnimationFrame(animation);
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
requestAnimationFrame(animation);
}Intersection Observer API
现代浏览器支持的更高效的观察方式：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素进入视口时的处理
}
});
}, {threshold: 0.1});
document.querySelectorAll('.section').forEach(section => {
observer.observe(section);
});注意事项
- 移动端需要考虑浏览器工具栏高度的影响
- 平滑滚动效果在低配设备上可能表现不佳
- 动态加载内容需要重新计算锚点位置
- 对于fixed定位的头部需要额外偏移补偿
以上方法可根据具体场景选择使用，现代浏览器推荐优先使用scrollIntoView或Intersection Observer API实现。
