首页 > 作文

页面添加锚点后如何点击不改变URL?

更新时间:2023-04-03 02:44:38 阅读: 评论:0

  直接奔主题,前端简单地锚点实现方法大家都会,无非就是在把 a 标签的 href 写成想要跳到的元素的id ,比如点击 <a href=”#box”&g英雄联盟战争之王t;</a&g爱情从告白开始t; 页面就会自动滚动到 <div id=”box”></div> 元素的位置。

  那么这样使用会产生一个现象,那就是 url 会被hot怎么发音改变,浏览器默认的行为会将 id 放在 url 后面。比如:http://www.xxx.com#box

  有的时候可能不会产生任何问题,直接跳转过去立马完成产品的需求,但是当存在多个锚点的时候,我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面,而是放回上一个带有锚点的链接比如:

  http://www.xxx.com#box2 点击后退时 变成了http://www.xxx.com#box1 其实还在原来的页面只是改变了 hash 值????那用户体验是极差的,甚至不注意观察的用户会以为浏览器出了问题,后退按钮不管用了????

  现在就记录一下解决的方法。

  把a标签替换掉,或者不加href,我们把要点击的按钮绑定在线教程一个点击事件,那么这个点击事件需要做什么的?看下面的代码!

//给想要点击的元素绑定事件并传入要跳到元素的id
//因为项目使用vue就直接写@click
<a @click="changehash('#box2')"></a>//使用document.querylector实现锚点的效果changehash(idname) { document.querylector(中秋活动idname).scrollintoview(true);}

  案例:

  以上就是实现点击锚点后不改变url的方法。

  

本文发布于:2023-04-03 02:42:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/ef646602b3f0c97cac70f2e8bc00ffcf.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:页面添加锚点后如何点击不改变URL?.doc

本文 PDF 下载地址:页面添加锚点后如何点击不改变URL?.pdf

标签:元素   按钮   浏览器   事件
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图