本文介紹了JS如何實(shí)現(xiàn)在頁面上快速定位（錨點(diǎn)跳轉(zhuǎn)問題），分享給大家，具體如下：

1. 錨點(diǎn)跳轉(zhuǎn)簡(jiǎn)介

錨點(diǎn)其實(shí)就是可以讓頁面定位到某個(gè)位置上的點(diǎn)。在高度較高的頁面中經(jīng)常見到。

錨點(diǎn)跳轉(zhuǎn)有兩種形式：

• a標(biāo)簽 + name / href 屬性
• 使用標(biāo)簽的id屬性

在html 4.0以前，只有使用 <a> 標(biāo)簽的 name 屬性才能創(chuàng)建片段標(biāo)識(shí)符。id 屬性的出現(xiàn)，使所有 HTML 或 XHTML 元素都可以是片段標(biāo)識(shí)符。這是因?yàn)?id 標(biāo)識(shí)符幾乎可以用在所有的標(biāo)簽中。<a> 標(biāo)簽為了能夠和以前的版本相兼容而保留了 name 屬性，同時(shí)也可以使用 id 屬性。這些屬性可以相互交換使用，可以把 id 屬性看作是 name 屬性的升級(jí)版本。name 和 id 屬性都可以與 href 屬性結(jié)合起來使用，這樣一個(gè) <a> 標(biāo)簽就可以同時(shí)作為超鏈接和片段標(biāo)識(shí)符使用。

<a href="#he" rel="external nofollow" rel="external nofollow" >波輪洗衣機(jī)介紹</a>
<a href="#f" rel="external nofollow" ></a>

但是這種方法使用了一個(gè)空標(biāo)簽，而且有時(shí)候會(huì)出現(xiàn)錨點(diǎn)失效。所以建議采用id來綁定錨點(diǎn)，代碼如下：

<a href="#he" rel="external nofollow" rel="external nofollow" >波輪洗衣機(jī)介紹</a><h2 id="#de">波輪洗衣機(jī)介紹</h2>

2. 含錨點(diǎn)跳轉(zhuǎn)的URL地址

window.location.hash

【1】關(guān)于#

在頁面的制作中，“#”的符號(hào)很常見，并且具有通用性?；旧希浔硎镜暮x是id選擇符。同樣的，在頁面的URL中，#也可以理解為id選擇符之意，也就是頁面跳轉(zhuǎn)到含URL指向的id標(biāo)簽處。
例如輸入一個(gè)地址http://www.dbjr.com.cn/view/121414.htm?pf=1#3

這個(gè)地址中末尾有個(gè)'#'，這個(gè)就相當(dāng)于告訴瀏覽器要跳轉(zhuǎn)了，#后面跟著的3表示會(huì)在http://www.dbjr.com.cn/view/121416.htm?pf=1的頁面中尋找符合#3特點(diǎn)的標(biāo)簽并且執(zhí)行跳轉(zhuǎn)。

【2】關(guān)于空錨點(diǎn)指向

如果URL中的#后面跟隨的字符id在文中找不到，就會(huì)有兩種情況：如果是在當(dāng)前頁面，除了URL地址變化了，其他的不會(huì)改變，頁面不會(huì)有跳轉(zhuǎn)；如果是從其他頁面跳轉(zhuǎn)過來，則頁面會(huì)在頂部顯示，'#'基本就是擺設(shè)。

【3】window.location.hash

用來獲取或設(shè)置頁面的標(biāo)簽值。http://www.dbjr.com.cn/article/22656.htm?dasdsa

3. Jquery下錨點(diǎn)的平滑跳轉(zhuǎn)。

如果讓頁面平滑滾動(dòng)到一個(gè)id為box的元素處，則JQuery代碼只要一句話，關(guān)鍵位置如下：

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

JS原生實(shí)現(xiàn)。

scrollTo() 方法可把內(nèi)容滾動(dòng)到指定的坐標(biāo)。

scrollTo(xpos,ypos);

4. IE下錨點(diǎn)刷新失效及JQuery下的解決

【1】關(guān)于錨點(diǎn)刷新失效

錨點(diǎn)刷新失效就是指當(dāng)按下刷新鍵F5時(shí)，即使此時(shí)URL的后面就隨錨點(diǎn)，此錨點(diǎn)也是不起作用的。

【2】在Jquery中，不難實(shí)現(xiàn)?？梢愿鶕?jù)URL獲取錨點(diǎn)，從而進(jìn)一步獲得對(duì)應(yīng)錨點(diǎn)對(duì)象，然后再讓頁面的滾動(dòng)高度為其距離頁面

頂部的偏移值就可以了。使得頁面無論是重新載入還是其刷新，其后面的錨點(diǎn)都起作用。

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論