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

奥利给

原因，我们经常需要用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()