直接奔主题,前端简单地锚点实现方法大家都会,无非就是在把 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?的更多相关文章

  1. Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法

      开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...

  2. selenium 页面超时后捕获异常也无法继续get(url)使用的问题解决方案

    参考这篇博客 http://www.xiaomilu.top/archives/106

  3. 页面嵌套iframe后,点击里面的链接,然后父窗口跳转(子窗口控制父窗口的链接跳转)

    做app的时候遇到一个问题,一个页面,然后里面嵌套了一个另一个页面,想实现点击里面的链接,然后外面进行跳转,不然的话,里面的页面永远出不来, 后面想了个办法,app的页面都是打开打开,不关闭的,然后由 ...

  4. 怎么用js设置a标签点击链接改变当前颜色

    怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...

  5. 关于APP在小米5s第一次安装启动后,点击home返回桌面,再次进入重进闪屏页问题

    现象 今天工作中,在对公司产品进行测试的时候,程序员小哥点出了一个问题.问题点出的步骤是这样的: 1.安装APP 2.点击打开 3.经过闪屏页,进入主页后,点击HOME键 4.再次进入程序会重新进入闪 ...

  6. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  7. 解决vuex在页面刷新后数据丢失的问题

    一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...

  8. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  9. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

随机推荐

  1. js 实用小技巧

    https://blog.csdn.net/www93111/article/details/76176771

  2. 转入墙内:SAS HBA crossflashing or flashing to IT mode, Dell Perc H200 and H310

    Default firmware for this guide is:2118it.binVersion 20.00.07.00Release date: 11-FEB-16 所有资源已转到百度盘: ...

  3. IOS-iphone默认的点击效果清除

    为需要被清除的元素添加此属性:-webkit-tap-highlight-color:rgba(255,255,255,0);

  4. smb 访问时 提示权限不够

    1. 确认 防火墙关闭和getenforce 为Permissive 状态. 关闭防火墙 service iptables stop 关闭  setenforce 0 2.windows 登录切换 身 ...

  5. Spring中使用RedisTemplate操作Redis(spring-data-redis)

    RedisTemplate如何检查一个key是否存在? return getRedisTemplate().hasKey(key); 由一个问题,复习了一下redis 抄自: https://www. ...

  6. python数据可视化

    1.安装matplotlib 在 cmd 中键入 python -m pip install matplotlib,系统将自动安装,需要等一段时间,待完成后 python -m pip list ,显 ...

  7. linux 7.2安装扩展redis

    unzip phpredis-php7.zip cd phpredis-php7 /usr/local/php7./bin/phpize ./configure --with-php-config=/ ...

  8. week4_1

    ---恢复内容开始--- _________________________________列表生成式_____________________ a = [a*2 for a in range(10) ...

  9. django数据库的表已迁移的不能重新迁移的解决办法

    django.db.utils.InternalError: (1050, "Table 'tb_content' already exists") mysql数据库在迁移时数据库 ...

  10. axios 发送post请求的时候会发送两次

    第一次发送的时候会先发送OPTIONS, 第二次才发送POST, 解决方法: 引用qs模块 安装qs依赖 npm install qs --save 引入qs依赖 import qs from 'qs ...