我如何在頁面加載時滾動到特定的 div

Question

我有這個 html 代碼：

<span name="value1"></span>
<span name="value2"></span>

每次頁面的 URL 加載跨度時，我都試圖讓頁面滾動到這些部分。

Example: htttp://site.com/index.html#value1

如果選擇value1 ，則打開頁面時有滾動。

我正在嘗試這段代碼：

$(document).ready(function() {  
        var target = $(this.hash);  
        if (target.length == 0) target = $('[name="' + this.hash.substr(1) + '"]');  
        if (target.length == 0) target = $('html');  
        $('html, body').animate({ scrollTop: target.offset().top }, 700);  
        return false;  
});

我可以用id做到這一點，但我想用名字 attr 做到這一點。

Answer 1

我可以建議考慮沒有 JavaScript 的解決方案嗎？

<a name="value1"></a><span name="value1"></span>

這將在加載頁面時使用瀏覽器的默認行為 go 到相應的部分。

---

如果元素的識別是問題，您可以嘗試傳統的 JS：

if (target.length == 0) {
    target = document.getElementsByName(window.location.hash.substr(1))[0];
}

Answer 2

您的 JavaScript 代碼看起來應該適用於id和name屬性，並且由於它適用於 id，我認為問題可能是您的 HTML 中的兩個可能問題之一：

1. 當您嘗試按name滾動到某個元素時，頁面上是否還有一個具有該id的元素？

從代碼中的這些行可以看出：

var target = $(this.hash);  
if (target.length == 0) target = $('[name="' + this.hash.substr(1) + '"]'); 

如果未找到具有id={hash}的元素，該腳本將僅查找具有name={hash}的元素。

2.您的標簽無效 HTML

我認為這在技術上不應該阻止腳本按您想要的方式工作，但無論如何知道它可能很有用。 正如您從其他SO question中看到的那樣，只有某些元素應該具有name屬性。

我相信您在這里想要的是<a name="value..."> ，將 Anchor 標簽用於其 最初的預期用途之一。