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

本文介绍了如何使用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()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值