JS錨點跳轉同一ID

隨着網頁的日益普及，網頁間的鏈接也越來越常見。在內部鏈接中，錨點是一種非常常見的方式，可以使用戶方便地跳轉到同一頁面內的指定位置。JavaScript是一種常用的實現方式，在這篇文章中，我們將從多個方面對JS錨點跳轉同一ID進行詳細闡述。

一、基本實現

首先，我們需要了解JS錨點跳轉的基本實現。其實實現原理很簡單，只需要使用跳轉所在元素的id作為跳轉地址的後綴即可。比如：

<div id="position"></div>
<a href="#position">跳轉到位置元素</a>

這樣，點擊鏈接就能夠跳轉到指定ID的位置。使用JS實現這個效果也是非常簡單的，只需要在點擊時加上JS跳轉代碼就可以了：

document.querySelector('a').onclick = function() {
  const element = document.querySelector(this.getAttribute('href'));
  element.scrollIntoView({
    behavior: 'smooth'
  });
  return false;
};

代碼中首先獲取到了鏈接的目標元素，然後使用scrollIntoView函數將該元素滾動到可視範圍內。同時為了讓滾動的效果更加平滑，我們還加了一個behavior選項。

二、多種特殊場景

實際應用中，表示需要跳轉的位置可能不僅僅只有一個元素ID。接下來，我們將對幾種需要特殊處理的場景進行闡述。

1、跳轉到頂部

有時候我們可能需要在一定的條件下跳轉到頁面頂部，在這種情況下我們只需要將href的值設為「#」即可：

<a href="#">回到頂部</a>

JS實現代碼如下：

document.querySelector('a').onclick = function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
  return false;
};

以實現效果為例，點擊這裡會立即跳轉到頂部。

2、跳轉到下一次定位

在一個較長的頁面中，用戶可能需要多次快速跳轉到不同的位置，這時候我們的定位順序也需要按照跳轉的順序進行調整。接下來我們將演示如何實現這一需求。

首先，我們需要在頁面中為每個需要定位到的元素添加一個分類標記，以此來進行正確的排序：

<div id="section-1" class="section"></div>
<div id="section-2" class="section"></div>
<div id="section-3" class="section"></div>
...

代碼中，我們為每個元素加了class名為「section」，以此來進行標記。接下來，我們需要使用JS來實現定位。在每次跳轉的時候，都要找到當前視窗內未定位的「section」元素，然後移動到其中第一個即可：

document.querySelector('a').onclick = function() {
  const elements = [...document.querySelectorAll('.section:not(.located)')];
  if (elements.length === 0) return false;
  const element = elements[0];
  element.scrollIntoView({
    behavior: 'smooth'
  });
  element.classList.add('located');
  return false;
};

代碼中，我們首先使用查詢器找到所有未定位的「section」元素，並且根據其出現順序進行排序。然後在獲取到第一個未定位元素後，我們為其添加一個「located」類來標記它已經定位過了。

3、跳轉到彈窗後定位

當我們需要在打開一個固定位置的彈窗時，可能需要先讓定位在彈窗上，而不是在後面的頁面上。這種情況下我們需要對錨點定位進行一些改造。

首先，我們需要調整我們的鏈接，將彈窗地址加入到鏈接地址中：

<a href="#position-popup@position">打開彈窗並定位</a>

代碼中，我們在彈窗地址後面加入了一個「@」符號，以此來區別錨點地址和彈窗地址。

在JS實現中，我們需要對這種鏈接進行特殊處理，判斷是否需要打開彈窗：

document.querySelector('a').onclick = function() {
  const link = this.getAttribute('href');
  const parts = link.split('@');
  if (parts.length === 2) {
    const popup = window.open(parts[0]);
    popup.addEventListener('load', function() {
      const element = popup.document.querySelector(parts[1]);
      element.scrollIntoView({
        behavior: 'smooth'
      });
    });
    return false;
  } else {
    const element = document.querySelector(parts[0]);
    element.scrollIntoView({
      behavior: 'smooth'
    });
    return false;
  }
};

在代碼中，我們首先將鏈接地址和定位地址進行分離，如果定位地址存在則打開一個新窗口，並且在窗口載入完成後使用scrollIntoView函數進行定位。如果不存在，則直接使用之前的定位方式即可。

4、跳轉到固定寬高比的圖片/視頻

在網站中有時候我們需要對圖片或視頻進行自適應寬高比布局，此時可能需要定位到固定寬高比的元素上。

首先我們需要指定「position」元素的寬高比：

<div id="position" style="padding-bottom: 56.25%"></div>

代碼中，我們使用CSS的padding-bottom屬性來實現寬高比。

在JS實現中，我們需要先計算出元素的高度，然後再使用scrollIntoView函數進行定位：

document.querySelector('a').onclick = function() {
  const element = document.querySelector(this.getAttribute('href'));
  const height = element.offsetWidth * 0.5625;
  element.style.height = height + 'px';
  element.scrollIntoView({
    behavior: 'smooth'
  });
  return false;
};

代碼中，我們首先使用offsetWidth計算出寬度，然後再根據寬高比計算出高度，並且將高度設置到元素上。最後再進行滾動定位。

三、總結

在本文中我們從多個方面對JS錨點跳轉同一ID進行了詳細的闡述。通過本文的介紹，我們能夠清晰地了解到如何實現錨點跳轉，並且還講解了幾種特殊場景下的實現方法。希望本文能夠對廣大讀者有所幫助！