html 锚点平滑滚动到目标位置

// 获取所有的锚点链接元素
const anchorLinks = document.querySelectorAll('a[href^="#"]');

// 给每个锚点链接添加点击事件处理程序
anchorLinks.forEach(link => {
	link.addEventListener('click', e => {
		e.preventDefault(); // 阻止默认的锚点跳转行为

		// 获取目标元素的ID
		const targetId = link.getAttribute('href');
		console.log(targetId)

		// 获取目标元素
		const targetElement = document.querySelector(targetId);

		// 使用scrollIntoView方法实现平滑滚动效果
		targetElement.scrollIntoView({
			behavior: 'smooth',
			block: 'start' // 滚动到目标元素顶部
		});
	});
});

这段代码要放在body的后面,否则找不到元素

你可能感兴趣的:(前端,html,前端,javascript)