zoukankan      html  css  js  c++  java
  • 页面添加锚点后如何点击不改变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的方法。

      

  • 相关阅读:
    OJ:自己实现一个简单的 priority_queue
    OJ:访问 const 成员函数问题
    OJ:重载 << 运算符
    Qt 编程中 namespace Ui { class Widget; } 解析
    QT 实现图片旋转的两种方法
    QTimer 的使用
    QT 完美实现圆形按钮
    QT 设置有效绘图区域
    基于 LWIP 建立 TCP Server 与主机通信实验
    大整数相乘 分治法 和 循环暴力法
  • 原文地址:https://www.cnblogs.com/zheng577564429/p/10025443.html
Copyright © 2011-2022 走看看