首页 > Web开发 > 详细

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

时间:2021-04-11 10:58:18      阅读:25      评论:0      收藏:0      [点我收藏+]

阻止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出现瞄点的解决办法

原文:https://www.cnblogs.com/jniantic/p/14642758.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!