A标签锚点跳转不改变路由地址

最新推荐文章于 2025-06-11 18:47:23 发布

原创最新推荐文章于 2025-06-11 18:47:23 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #javascript #js #html

笔记同时被 3 个专栏收录

33 篇文章

订阅专栏

JavaScript

30 篇文章

订阅专栏

nodejs

15 篇文章

订阅专栏

本文介绍了如何使用JavaScript优雅地处理页面内的锚点跳转，避免URL改变，同时确保在JS不运行时仍能使用原始的HTML锚点功能。通过监听a标签点击事件，解析href并使用scroll函数平滑滚动到目标位置，防止地址栏URL更新，提高用户体验。此外，还提供了添加缓动效果的优化方案，使得页面过渡更加流畅。只需在页面引入JS脚本，即可实现无缝的锚点导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

奥利给

原因，我们经常需要用a标签来做锚点跳转，但是尴尬的就是跳转后地址栏的url会改变，起初我也没注意。（讲真，这个有时候又好处，有时候有坏处。坏处就是改变了路由，就很不优雅，好处是如果用户把这个链接分享出去他可以跳转到之前用户停留的锚点）

为什么要用a标签跳转啊，我用别的不行吗？当然可以，但是我们得考虑如果js不运行了，起码还有原始的锚点跳转做保证吧。

原理就是js查找a标签指向的锚点，但是我们不可能一个一个写吧，不然很不优雅。所以我们就封装寻找所有a标签，再判断指向是否含有#号，如果有则的添加点击事件。调用scroll函数滚到指向的元素。但是我们发现地址栏url还是改变了，那证明a标签的跳转还是存在，那我们就把a标签的默认点击事件去除掉。

完美，优雅。

精益求精的小伙伴还可以加一个时间函数来缓慢移动。

这样我们只需要在页面中引入改js即可，且不用注意什么，正常写我们的前端代码即可。

(function(){
	var allJump=[];
	var allA=document.querySelectorAll("a");// 获取所有a标签
	allA.forEach((ele,index)=>{
		// console.log(index);
		// console.log(ele.href);
		if(ele.href.search("#")>12){
			allJump.push(ele);// 判断a标签是否含有#	
		}
	})
	// console.log(allJump);
	allJump.forEach((ele)=>{
		ele.addEventListener("click",(e)=>{
			// 首先解析出href
			e.preventDefault();// 这个非常关键
			var jumpTarget=ele.href.split("#")[1]
			if(jumpTarget){
				// console.log(123);
				var targaetEle=document.querySelector("#"+jumpTarget);
				h=targaetEle.offsetTop;
				window.scrollTo(0,h);
				// console.log(jumpTarget);
			}else{
				window.scrollTo(0,0);
			}
		});			
		// return false;
	})
}).call()