如何使用 JavaScript 捲動到某個元素？

如何使用JavaScript捲動到某個元素？

您可以使用scrollIntoView()方法捲動到網頁上的特定元素。所有主流瀏覽器都支援此方法。

要使用scrollIntoView()方法，只需將要捲動到的元素作為參數傳遞給該方法即可。例如，以下程式碼捲動到 ID 為「divFirst」的元素：

document.getElementById("divFirst").scrollIntoView();

scrollIntoView() 方法可以採用可選的第二個參數，該參數指定如何將元素捲動到視圖中。接受以下值：

• 「auto」：元素將盡可能捲動到視圖中，而不將頁面捲動離開其目前位置。
• 「smooth」：元素將平滑地捲動到視圖中，並帶有動畫效果。
• “if-needed”：元素僅在尚不可見時才會捲動到視圖中。

例如，以下程式碼平滑地捲動至ID 為「divFirst」的元素：

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

您也可以使用scrollIntoView() 方法捲動到元素內的特定偏移量。為此，請將具有以下屬性的物件作為該方法的第二個參數傳遞：

• 「block」：距元素頂部的偏移量（以像素為單位）。
• "inline": 距元素左側的偏移量，以像素為單位。

例如，以下程式碼捲動至 ID 為「divFirst」的元素，並從頂部偏移 100 像素距左側 50 像素：

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

以上是如何使用 JavaScript 捲動到某個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！