码迷,mamicode.com
首页 > 其他好文 > 详细

路由跳转中的hash值和锚点冲突

时间:2020-07-04 18:41:20      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:into   文本   return   document   scroll   lis   sel   his   rev   

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值和锚点冲突之后,手动拿到锚点的位置进行滑动
    },

路由跳转中的hash值和锚点冲突

标签:into   文本   return   document   scroll   lis   sel   his   rev   

原文地址:https://www.cnblogs.com/MJmajong/p/13235934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!