前端：页面快速定位和返回顶部（锚点）
生活随笔
收集整理的這篇文章主要介紹了
前端：页面快速定位和返回顶部（锚点）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
基本介紹
錨點(diǎn)頁(yè)面定位以唯一id 或 name的形式跳轉(zhuǎn)
以a標(biāo)簽為例
a標(biāo)簽里面包含herf屬性用于寫入跳轉(zhuǎn)的定位
測(cè)試的文章篇幅最好是較多，因?yàn)樘D(zhuǎn)時(shí)才看的出來效果
基本寫法
1，在a標(biāo)簽里面寫入herf要跳轉(zhuǎn)的地址，前面必須加上個(gè)#號(hào)，另外可以在標(biāo)簽里面寫入一些內(nèi)容，如下面所示：
<a href="#第一章">第一章節(jié)</a><br>2，每一段內(nèi)容用一個(gè)p標(biāo)簽包起來，并且給一個(gè)唯一id屬性，用于與與a標(biāo)簽里面的herf屬性對(duì)應(yīng)，如下：
<p id="第一章">這樣a標(biāo)簽里的herf屬性就與p標(biāo)簽的唯一標(biāo)識(shí)聯(lián)系起來了。
注意：p標(biāo)簽唯一id是什么，那么a 標(biāo)簽里面的herf屬性要與其對(duì)應(yīng)時(shí)就要寫入p標(biāo)簽的id名，并且前面要寫入#號(hào)
實(shí)例：
測(cè)試的源代碼
<!DOCTYPE html> <html> <head><title></title> </head> <body><a href="#第一章">第一章節(jié)</a><br><a href="#第二章">第二章節(jié)</a><br><a href="#第三章">第三章節(jié)</a><br><a href="#第四章">第四章節(jié)</a><br><a href="#第五章">第五章節(jié)</a><br><p id="第一章">1,近日，中國(guó)科學(xué)院寧波材料技術(shù)與工程研究所、航天五院錢學(xué)森實(shí)驗(yàn)室、中國(guó)科學(xué)院物理研究所和南京大學(xué)等聯(lián)合團(tuán)隊(duì)，對(duì)嫦娥五號(hào)月壤顆粒中的氦原子進(jìn)行了探測(cè)和研究。發(fā)現(xiàn)月壤中鈦鐵礦顆粒表面都存在一層非晶玻璃。研究人員在玻璃層中觀測(cè)到了大量的氦氣泡，直徑大約為5～25nm，且大部分氣泡都位于玻璃層與晶體的界面附近。而在顆粒內(nèi)部晶體中，基本沒有氦氣泡。鑒于氦在鈦鐵礦中的高溶解度，研究人員認(rèn)為氦原子首先由太陽(yáng)風(fēng)注入鈦鐵礦晶格中，之后在晶格的溝道擴(kuò)散效應(yīng)下，氦會(huì)逐漸釋放出來。而表層玻璃具有原子無序堆積結(jié)構(gòu)，限制了氦原子的釋放，被捕獲并逐漸儲(chǔ)存起來，形成了氣泡。氦-3作為氦的一種同位素，在能源、科學(xué)研究等領(lǐng)域具有重要應(yīng)用價(jià)值。100噸氦-3核聚變產(chǎn)生的能量即可供應(yīng)全球使用1年，且氦-3核聚變過程無中子二次輻射危險(xiǎn)，更加清潔和可控。另外，氦-3是獲得極低溫環(huán)境的關(guān)鍵制冷劑，是超導(dǎo)、量子計(jì)算、拓?fù)浣^緣體等前沿研究領(lǐng)域的必需物質(zhì)。然而，地球上氦元素主要是氦-4，氦-3儲(chǔ)量只有0.5噸左右，遠(yuǎn)遠(yuǎn)無法滿足現(xiàn)有需求。氦-3是太陽(yáng)風(fēng)的重要成分，月球由于常年受太陽(yáng)風(fēng)的輻照，儲(chǔ)存了大量氦-3。但是為什么月球具有豐富的戰(zhàn)略資源氦-3？氦-3在月球上是以什么形式儲(chǔ)藏的？這些問題還沒有明確的答案。探索月球資源，特別是氦-3的含量、分布和開采，已經(jīng)</p><p id="第二章">2,近日，中國(guó)科學(xué)院寧波材料技術(shù)與工程研究所、航天五院錢學(xué)森實(shí)驗(yàn)室、中國(guó)科學(xué)院物理研究所和南京大學(xué)等聯(lián)合團(tuán)隊(duì)，對(duì)嫦娥五號(hào)月壤顆粒中的氦原子進(jìn)行了探測(cè)和研究。發(fā)現(xiàn)月壤中鈦鐵礦顆粒表面都存在一層非晶玻璃。研究人員在玻璃層中觀測(cè)到了大量的氦氣泡，直徑大約為5～25nm，且大部分氣泡都位于玻璃層與晶體的界面附近。而在顆粒內(nèi)部晶體中，基本沒有氦氣泡。鑒于氦在鈦鐵礦中的高溶解度，研究人員認(rèn)為氦原子首先由太陽(yáng)風(fēng)注入鈦鐵礦晶格中，之后在晶格的溝道擴(kuò)散效應(yīng)下，氦會(huì)逐漸釋放出來。而表層玻璃具有原子無序堆積結(jié)構(gòu)，限制了氦原子的釋放，被捕獲并逐漸儲(chǔ)存起來，形成了氣泡。氦-3作為氦的一種同位素，在能源、科學(xué)研究等領(lǐng)域具有重要應(yīng)用價(jià)值。100噸氦-3核聚變產(chǎn)生的能量即可供應(yīng)全球使用1年，且氦-3核聚變過程無中子二次輻射危險(xiǎn)，更加清潔和可控。另外，氦-3是獲得極低溫環(huán)境的關(guān)鍵制冷劑，是超導(dǎo)、量子計(jì)算、拓?fù)浣^緣體等前沿研究領(lǐng)域的必需物質(zhì)。然而，地球上氦元素主要是氦-4，氦-3儲(chǔ)量只有0.5噸左右，遠(yuǎn)遠(yuǎn)無法滿足現(xiàn)有需求。氦-3是太陽(yáng)風(fēng)的重要成分，月球由于常年受太陽(yáng)風(fēng)的輻照，儲(chǔ)存了大量氦-3。但是為什么月球具有豐富的戰(zhàn)略資源氦-3？氦-3在月球上是以什么形式儲(chǔ)藏的？這些問題還沒有明確的答案。探索月球資源，特別是氦-3的含量、分布和開采，已經(jīng)</p><p id="第三章">3,近日，中國(guó)科學(xué)院寧波材料技術(shù)與工程研究所、航天五院錢學(xué)森實(shí)驗(yàn)室、中國(guó)科學(xué)院物理研究所和南京大學(xué)等聯(lián)合團(tuán)隊(duì)，對(duì)嫦娥五號(hào)月壤顆粒中的氦原子進(jìn)行了探測(cè)和研究。發(fā)現(xiàn)月壤中鈦鐵礦顆粒表面都存在一層非晶玻璃。研究人員在玻璃層中觀測(cè)到了大量的氦氣泡，直徑大約為5～25nm，且大部分氣泡都位于玻璃層與晶體的界面附近。而在顆粒內(nèi)部晶體中，基本沒有氦氣泡。鑒于氦在鈦鐵礦中的高溶解度，研究人員認(rèn)為氦原子首先由太陽(yáng)風(fēng)注入鈦鐵礦晶格中，之后在晶格的溝道擴(kuò)散效應(yīng)下，氦會(huì)逐漸釋放出來。而表層玻璃具有原子無序堆積結(jié)構(gòu)，限制了氦原子的釋放，被捕獲并逐漸儲(chǔ)存起來，形成了氣泡。氦-3作為氦的一種同位素，在能源、科學(xué)研究等領(lǐng)域具有重要應(yīng)用價(jià)值。100噸氦-3核聚變產(chǎn)生的能量即可供應(yīng)全球使用1年，且氦-3核聚變過程無中子二次輻射危險(xiǎn)，更加清潔和可控。另外，氦-3是獲得極低溫環(huán)境的關(guān)鍵制冷劑，是超導(dǎo)、量子計(jì)算、拓?fù)浣^緣體等前沿研究領(lǐng)域的必需物質(zhì)。然而，地球上氦元素主要是氦-4，氦-3儲(chǔ)量只有0.5噸左右，遠(yuǎn)遠(yuǎn)無法滿足現(xiàn)有需求。氦-3是太陽(yáng)風(fēng)的重要成分，月球由于常年受太陽(yáng)風(fēng)的輻照，儲(chǔ)存了大量氦-3。但是為什么月球具有豐富的戰(zhàn)略資源氦-3？氦-3在月球上是以什么形式儲(chǔ)藏的？這些問題還沒有明確的答案。探索月球資源，特別是氦-3的含量、分布和開采，已經(jīng)</p><p id="第四章">4,近日，中國(guó)科學(xué)院寧波材料技術(shù)與工程研究所、航天五院錢學(xué)森實(shí)驗(yàn)室、中國(guó)科學(xué)院物理研究所和南京大學(xué)等聯(lián)合團(tuán)隊(duì)，對(duì)嫦娥五號(hào)月壤顆粒中的氦原子進(jìn)行了探測(cè)和研究。發(fā)現(xiàn)月壤中鈦鐵礦顆粒表面都存在一層非晶玻璃。研究人員在玻璃層中觀測(cè)到了大量的氦氣泡，直徑大約為5～25nm，且大部分氣泡都位于玻璃層與晶體的界面附近。而在顆粒內(nèi)部晶體中，基本沒有氦氣泡。鑒于氦在鈦鐵礦中的高溶解度，研究人員認(rèn)為氦原子首先由太陽(yáng)風(fēng)注入鈦鐵礦晶格中，之后在晶格的溝道擴(kuò)散效應(yīng)下，氦會(huì)逐漸釋放出來。而表層玻璃具有原子無序堆積結(jié)構(gòu)，限制了氦原子的釋放，被捕獲并逐漸儲(chǔ)存起來，形成了氣泡。氦-3作為氦的一種同位素，在能源、科學(xué)研究等領(lǐng)域具有重要應(yīng)用價(jià)值。100噸氦-3核聚變產(chǎn)生的能量即可供應(yīng)全球使用1年，且氦-3核聚變過程無中子二次輻射危險(xiǎn)，更加清潔和可控。另外，氦-3是獲得極低溫環(huán)境的關(guān)鍵制冷劑，是超導(dǎo)、量子計(jì)算、拓?fù)浣^緣體等前沿研究領(lǐng)域的必需物質(zhì)。然而，地球上氦元素主要是氦-4，氦-3儲(chǔ)量只有0.5噸左右，遠(yuǎn)遠(yuǎn)無法滿足現(xiàn)有需求。氦-3是太陽(yáng)風(fēng)的重要成分，月球由于常年受太陽(yáng)風(fēng)的輻照，儲(chǔ)存了大量氦-3。但是為什么月球具有豐富的戰(zhàn)略資源氦-3？氦-3在月球上是以什么形式儲(chǔ)藏的？這些問題還沒有明確的答案。探索月球資源，特別是氦-3的含量、分布和開采，已經(jīng)</p><p id="第五章">5,近日，中國(guó)科學(xué)院寧波材料技術(shù)與工程研究所、航天五院錢學(xué)森實(shí)驗(yàn)室、中國(guó)科學(xué)院物理研究所和南京大學(xué)等聯(lián)合團(tuán)隊(duì)，對(duì)嫦娥五號(hào)月壤顆粒中的氦原子進(jìn)行了探測(cè)和研究。發(fā)現(xiàn)月壤中鈦鐵礦顆粒表面都存在一層非晶玻璃。研究人員在玻璃層中觀測(cè)到了大量的氦氣泡，直徑大約為5～25nm，且大部分氣泡都位于玻璃層與晶體的界面附近。而在顆粒內(nèi)部晶體中，基本沒有氦氣泡。鑒于氦在鈦鐵礦中的高溶解度，研究人員認(rèn)為氦原子首先由太陽(yáng)風(fēng)注入鈦鐵礦晶格中，之后在晶格的溝道擴(kuò)散效應(yīng)下，氦會(huì)逐漸釋放出來。而表層玻璃具有原子無序堆積結(jié)構(gòu)，限制了氦原子的釋放，被捕獲并逐漸儲(chǔ)存起來，形成了氣泡。氦-3作為氦的一種同位素，在能源、科學(xué)研究等領(lǐng)域具有重要應(yīng)用價(jià)值。100噸氦-3核聚變產(chǎn)生的能量即可供應(yīng)全球使用1年，且氦-3核聚變過程無中子二次輻射危險(xiǎn)，更加清潔和可控。另外，氦-3是獲得極低溫環(huán)境的關(guān)鍵制冷劑，是超導(dǎo)、量子計(jì)算、拓?fù)浣^緣體等前沿研究領(lǐng)域的必需物質(zhì)。然而，地球上氦元素主要是氦-4，氦-3儲(chǔ)量只有0.5噸左右，遠(yuǎn)遠(yuǎn)無法滿足現(xiàn)有需求。氦-3是太陽(yáng)風(fēng)的重要成分，月球由于常年受太陽(yáng)風(fēng)的輻照，儲(chǔ)存了大量氦-3。但是為什么月球具有豐富的戰(zhàn)略資源氦-3？氦-3在月球上是以什么形式儲(chǔ)藏的？這些問題還沒有明確的答案。探索月球資源，特別是氦-3的含量、分布和開采，已經(jīng)</p> </body> </html>結(jié)果如下：
當(dāng)我點(diǎn)擊第五章節(jié)時(shí)，跳轉(zhuǎn)到了第五章節(jié)對(duì)應(yīng)的地方
思考：要怎么回到第一章節(jié)呢？
這時(shí)只需要在最后加一個(gè)a標(biāo)簽，并且里面的herf屬性與第一章關(guān)聯(lián)起來就可以了。
所以只需要在內(nèi)容最后寫入如下：
<a href="#第一章">返回第一章</a>點(diǎn)擊 ‘’返回第一章‘’ 就跳轉(zhuǎn)到最上面了
總結(jié)
以上是生活随笔為你收集整理的前端：页面快速定位和返回顶部（锚点）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 运筹学
- 下一篇： 360浏览器怎么设置html5播放,36