阻止a标签锚点跳转后url出现瞄点的解决办法

阻止a标签锚点跳转后url出现瞄点的解决办法

最近在弄一个目录导航，用到锚点链接，但是使用锚点后地址栏会出现锚点信息，强迫症的我折腾了一下，于是有了这篇博客

把原来a标签的href改为现在这样<a href="javascript:;" onclick="tz();">

然后再给onclick写一个JavaScript的方法来执行跳转；

比如

function tz(){
    //获取文档对象
    let el = document.documentElement;
    //获取目标要锚点跳转的div
	let st = document.getElementById('st');
    //将该div的高度赋给当前浏览的滚动条高度
	el.scrollTop = st.offsetTop;
}

这时候是否有疑问了？用onclick直接能解决的问题为啥要用a标签

当然也可以直接用onclick啦，Vue中直接用@click

这时候我们发现，完成上面这个方法后，页内跳转很生硬，像闪现了一样。

如果你需要缓动效果，在css文件中加入，大功告成！

html,body{
	scroll-behavior:smooth;
}

注意：此效果对Safari无效（未来如果有解决办法，继续更新本博客-2021/4/11）。