在進(jìn)行頁(yè)面前端開(kāi)發(fā)時(shí)，經(jīng)常需要實(shí)現(xiàn)頁(yè)面內(nèi)部的跳轉(zhuǎn)功能。然而，使用普通的超鏈接錨點(diǎn)跳轉(zhuǎn)方式會(huì)導(dǎo)致瀏覽器地址欄中的連接地址發(fā)生變化。這樣一來(lái)，用戶(hù)執(zhí)行后退操作時(shí)會(huì)返回到錨點(diǎn)跳轉(zhuǎn)之前的位置，而非期望中的回到

在進(jìn)行頁(yè)面前端開(kāi)發(fā)時(shí)，經(jīng)常需要實(shí)現(xiàn)頁(yè)面內(nèi)部的跳轉(zhuǎn)功能。然而，使用普通的超鏈接錨點(diǎn)跳轉(zhuǎn)方式會(huì)導(dǎo)致瀏覽器地址欄中的連接地址發(fā)生變化。這樣一來(lái)，用戶(hù)執(zhí)行后退操作時(shí)會(huì)返回到錨點(diǎn)跳轉(zhuǎn)之前的位置，而非期望中的回到進(jìn)入當(dāng)前頁(yè)面之前的舊頁(yè)面。為了解決這個(gè)問(wèn)題，可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)頁(yè)面內(nèi)的跳轉(zhuǎn)。下面將介紹如何在頁(yè)面中添加錨點(diǎn)后點(diǎn)擊不改變URL地址。

創(chuàng)建HTML文件及添加基礎(chǔ)結(jié)構(gòu)

首先，在Visual Studio Code中新建一個(gè)HTML頁(yè)面文件。在創(chuàng)建的HTML文件中，添加以下HTML代碼結(jié)構(gòu)。在body內(nèi)部的第一行是五個(gè)超鏈接，它們的href屬性均設(shè)為`javascript:void(0)`，這樣用戶(hù)點(diǎn)擊超鏈接時(shí)將不會(huì)執(zhí)行鏈接跳轉(zhuǎn)。接著，添加五個(gè)div用于模擬內(nèi)容布局。

實(shí)現(xiàn)效果預(yù)覽

用瀏覽器打開(kāi)前面編寫(xiě)的簡(jiǎn)單HTML代碼，即可看到頁(yè)面呈現(xiàn)的效果。超鏈接不再觸發(fā)頁(yè)面跳轉(zhuǎn)，而五個(gè)div元素展示了模擬的內(nèi)容布局，為后續(xù)的JavaScript效果代碼做準(zhǔn)備。

添加JavaScript效果代碼

在HTML頁(yè)面中嵌入JavaScript代碼，確保在window對(duì)象的onload回調(diào)中所有內(nèi)容都加載完成。這樣，就能成功獲取超鏈接和div塊布局元素。接著，為每個(gè)超鏈接對(duì)象增加onclick點(diǎn)擊回調(diào)函數(shù)，在點(diǎn)擊回調(diào)函數(shù)中執(zhí)行div對(duì)象的scrollIntoView()方法，使當(dāng)前元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)，實(shí)現(xiàn)頁(yè)面內(nèi)跳轉(zhuǎn)效果。

保存并刷新頁(yè)面查看效果

保存上述完整的HTML文件，刷新瀏覽器中展示的內(nèi)容，點(diǎn)擊任何一個(gè)超鏈接都能夠?qū)崿F(xiàn)跳轉(zhuǎn)到指定的內(nèi)容區(qū)域，而地址欄并未發(fā)生改變。例如，第三欄可以滾動(dòng)到瀏覽器頂部顯示，而第四欄由于底部無(wú)法再向上滾動(dòng)，則展示在屏幕中間位置。

通過(guò)以上步驟，我們成功實(shí)現(xiàn)了在頁(yè)面添加錨點(diǎn)后點(diǎn)擊不改變URL地址的方法，為用戶(hù)提供更加流暢和友好的頁(yè)面內(nèi)跳轉(zhuǎn)體驗(yàn)。這種技朧不僅符合用戶(hù)習(xí)慣，同時(shí)也提升了頁(yè)面的交互性和可操作性。在實(shí)際的網(wǎng)頁(yè)開(kāi)發(fā)中，合理運(yùn)用JavaScript技術(shù)，可以為用戶(hù)帶來(lái)更好的瀏覽體驗(yàn)。