阻止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)。

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

上一篇:asp源码我开发的所有微信公众号接口源码


下一篇:javaEE版本的eclipse中导入工程,发现server里面找不到工程,根本发布不了也不能运行