路由跳轉中的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值和錨點沖突之后,手動拿到錨點的位置進行滑動
    },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM