页面添加锚点后如何点击不改变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的方法。
页面添加锚点后如何点击不改变URL?的更多相关文章
- Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法
开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...
- selenium 页面超时后捕获异常也无法继续get(url)使用的问题解决方案
参考这篇博客 http://www.xiaomilu.top/archives/106
- 页面嵌套iframe后,点击里面的链接,然后父窗口跳转(子窗口控制父窗口的链接跳转)
做app的时候遇到一个问题,一个页面,然后里面嵌套了一个另一个页面,想实现点击里面的链接,然后外面进行跳转,不然的话,里面的页面永远出不来, 后面想了个办法,app的页面都是打开打开,不关闭的,然后由 ...
- 怎么用js设置a标签点击链接改变当前颜色
怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...
- 关于APP在小米5s第一次安装启动后,点击home返回桌面,再次进入重进闪屏页问题
现象 今天工作中,在对公司产品进行测试的时候,程序员小哥点出了一个问题.问题点出的步骤是这样的: 1.安装APP 2.点击打开 3.经过闪屏页,进入主页后,点击HOME键 4.再次进入程序会重新进入闪 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 解决vuex在页面刷新后数据丢失的问题
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
随机推荐
- linux生成公钥私钥并上传到服务器上实现免密登陆
1. 生成密钥对 # -t 指定加密算法: -b 指定生成的密钥长度: -C 一句话,一般都填邮箱地址. # 更多参数说明可以在终端输入:ssh-keygen --help 查看 ssh-keygen ...
- .net压缩文件夹
1,引用:using System.IO.Packaging; 2,压缩文件的方法: /// <summary> /// 压缩文件夹到制定的路径 /// </summary> ...
- js的短路
短路问题经常是发生在逻辑运算符中的逻辑与(&&).逻辑或(||) 1.逻辑或(||) 他是一真则真,当逻辑或前面的表达式结果为1或true时,逻辑或后面的表达式是不会执行的 2.逻辑与 ...
- js中for(var key in o ){};用法小记
o不只可以是对象,key也不只可以是对象中的键. o也可以是一个数组,这时候的key就是数组的下标,从"0"开始,注意下标“0”是个字符串类型. 但是这种循环在 IE8浏览器下 对 ...
- PL/SQL Developer如何导出数据成sql的insert语句
1.选择菜单 , [工具]-[导出表] 2.选择tab标签页的,[SQL插入] 注意where条件语句,注意要选择相应的表 3.选择输出
- python输入字符串
#!/usr/bin/env python#ecoding=utf-8'''Created on 2017年11月2日题目:利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出来. @autho ...
- day02 : JPA的基本使用和多种缓存技术对比
1). 按照条件查询标签: ① 在controller种添加方法 [确保表中有数据] /** * 根据条件查询 */ @PostMapping("/search") public ...
- IDEA中项目编码格式设置
自从换成IntelliJ IDEA 之后各种设置就成了问题,这不,在跟另一家公司做对接的时候,他们说我这边的http接口返回的都是乱码, 所有的接口我这边的都是访问过的,这个怎么会,我用360浏览器和 ...
- 开源代码chat_master分析
- Oracle角色,权限,表空间基础语句
控制台: -sqlplus -----连接数据库 -conn sys/123456@orcl as sysdba -----登录sys -create tablespac ...