zoukankan      html  css  js  c++  java
  • 路由跳转中的hash值和锚点冲突

    dealLink() {        //处理a标签情况,1、跳转到别的站点  2、当前页面锚点   3、不是站点又不是锚点,处理成文本形式
          let element = document.querySelectorAll('a')
          element.forEach((item, index) => {
            const href = item.getAttribute('href'),    //获取标签的href属性
              isInclude = href.includes('http'),      
              isHash = item.hash,
              noClick = !isInclude && !isHash         //特殊情况,不是站点又不是锚点的处理情况
            if (noClick) {
              item.style.color = 'rgba(0, 0, 0, 0.65)'
            }
            element[index].addEventListener('click', e => {
              this.stopDefault(e)
              if (noClick) {
                return false
              }
              if (isInclude) {
                window.open(href, '_blank')
              } else {
                this.anchorScroll(href)
              }
            })
          })
        },
        stopDefault(e) {
          if (e && e.preventDefault) {
            e.preventDefault()
          } else {
            window.event.returnValue = false
          }
        },
        anchorScroll(anchorName) {
          document.querySelector(anchorName).scrollIntoView(true)    //当hash值和锚点冲突之后,手动拿到锚点的位置进行滑动
        },
  • 相关阅读:
    穿戴式眼镜显示屏方案
    centos8 shell脚本定时restart workerman问题
    cmake中文文档(一)-编译命令行工具
    Dear ImGui中文文档(一)
    PHP实现布隆过滤算法
    case when的记录
    前端的一些记录
    z-index 弹出元素被原本页面的元素遮挡住
    DevExpress 导出pdf中文不显示或者乱码问题
    DevExpress控件位置的微调
  • 原文地址:https://www.cnblogs.com/MJmajong/p/13235934.html
Copyright © 2011-2022 走看看