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

　　直接奔主题，前端简单地锚点实现方法大家都会，无非就是在把 a 标签的 href 写成想要跳到的元素的id ，比如点击 <a href="#box"></a> 页面就会自动滚动到 <div id="box"></div> 元素的位置。

　　那么这样使用会产生一个现象，那就是 url 会被改变，浏览器默认的行为会将 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.querySelector实现锚点的效果
changeHash(idName) {
document.querySelector(idName).scrollIntoView(true);
}

　　案例：http://www.kaochong.com/course/detail-2264.html

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

更多专业前端知识，请上【猿2048】www.mk2048.com

页面添加锚点后如何点击不改变URL？相关推荐

python123练习题文库_python模拟登录百度文库后如何点击马上签到
这是登录的代码: #-*- coding: UTF-8 -*- import HTMLParser import urlparse import urllib import urllib2 impor ...
html+a+不刷新页面,前端路由实现：通过pushState()改变URL，同时不刷新页面
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 在前端框架层出不穷的当今时代,页面的变化变得更加具有迷惑性.页面地址变了的话,是否就意味着一定请求了新的页面么 ...
如何点击按钮弹出新窗口，输入数据后返回并刷新页面
如何点击按钮弹出新窗口,输入数据后返回并刷新页面? 作者:孟宪会出自:[孟宪会之精彩世界] 发布日期:2003年7月8日 4点0分13秒在一些.NET论坛中有人经常会问:如何在页面中点击按钮打开新 ...
Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法，本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片希望本文所述对大家的javascrip ...
刷新浏览器后不进行任何点击操作时，不播放声音 | 解决方案（VUE-Element）
以下代码可能过长,请耐心查阅前言最近项目中有播放背景声音的一个功能,后面发现刷新浏览器后,不对页面进行任何点击操作,浏览器不播放声音.作为一个后端开发,突然搞这么一个前端解决方案是有点懵逼的,下面 ...
php实现删除功能，点击删除弹出确认框，点确定删除数据，点取消返回。删除了商品后总价要相应的改变
1.连接数据库: 2. 订单信息从product数据库下computers表调出不分页显示在网页product.php; 实现删除功能,点击删除弹出确认框,点确定删除数据,点取消返回.删除了商品后总价 ...
案例：文件下载需求：1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...
class h5 点击后样式变化_【php】JQuery怎么实现页面刷新后保留鼠标点击addclass的样式？...
刚开始是这个效果鼠标点击之后变成了这个效果要保证实现 a 标签点击链接一个新的网址同时也要保证效果达到我目前写的网站代码可以下载 http://115.com/file/c2zlhblv 看 ...
关于微信JSAPI支付成功后，点击完成后没有返回值并且页面被自动关闭问题
微信JSAPI支付成功后,点击完成后没有返回值并且页面被自动关闭简介解决方式错误的处理方式总结简介最近很多人可能都遇到一个问题,在使用微信JSAPI支付成功后,不走成功的回调方法,只有支付 ...

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

页面添加锚点后如何点击不改变URL？相关推荐

最新文章

热门文章