頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
接著上一篇，其實(shí)是一個功能，本來感覺挺簡單的一個問題，沒想到遇到兩個坎兒，無語。。。
上一篇是關(guān)于scroll事件綁定的問題，這一篇的問題是：點(diǎn)擊錨點(diǎn)跳轉(zhuǎn)到相應(yīng)DIV的問題。
最簡單的方法是錨點(diǎn)用<a>標(biāo)簽，在href屬性中寫入DIV的id。如下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1" rel="external nofollow" >to div1</a>
<a href="#div2" rel="external nofollow" >to div2</a>
<a href="#div3" rel="external nofollow" >to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
這種方法的缺點(diǎn)是點(diǎn)擊錨點(diǎn)之后，瀏覽器的URL會發(fā)生變化，如果刷新可能會出現(xiàn)問題。
第二種方式是在js事件中通過window.location.hash="divId"跳轉(zhuǎn)，但地址也會發(fā)生變化，感覺跟第一種方法沒區(qū)別，甚至更麻煩。
第三種方法是用animate屬性，當(dāng)點(diǎn)擊錨點(diǎn)后，頁面滾動到相應(yīng)的DIV。接著上面的代碼，具體添加如下代碼：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript"><br>$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
1
</script>
注意：運(yùn)行上面的腳本的之前，先將為錨點(diǎn)增加相應(yīng)的id，同時去掉href屬性?！ ?/p>
$("html, body")可以替換為響應(yīng)的div，如果不起作用，試著給該div增加overflow：scroll屬性。
另外，腳本可以進(jìn)一步優(yōu)化，自己來試試
這樣做的好處是：URL地址不會變，同時點(diǎn)擊錨點(diǎn)時會自動響應(yīng)scroll事件，不需要重新綁定。
缺點(diǎn)是：如果頁面復(fù)雜的話，偏移值可能會發(fā)生變化需要算法輔助。
第四種方法是用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();
這種方法的好處，是URL不會變，同時能夠響應(yīng)相應(yīng)的scroll事件，不需要算法什么的。
推介大家用第四種，我依次試了前三種，都有各種問題（可能是頁面較復(fù)雜的緣故吧，當(dāng)然，技術(shù)不咋也是。。。）
以上所述是小編給大家介紹的頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
目前開發(fā)大型應(yīng)用，測試是一個非常重要的環(huán)節(jié)，而在 Vue 項(xiàng)目中做單元測試可以用 Jest，本文主要介紹了Vue-Jest 自動化測試，感興趣的可以了解一下2021-07-07
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實(shí)現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下2023-03-03
基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實(shí)現(xiàn)一個完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補(bǔ)充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下2019-11-11
本文通過實(shí)例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
Vue3.2?setup語法糖及Hook函數(shù)基本使用
這篇文章主要為大家介紹了Vue3.2?setup語法糖及Hook函數(shù)基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue使用formData時候傳遞參數(shù)是個空值的情況處理
這篇文章主要介紹了vue使用formData時候傳遞參數(shù)是個空值的情況處理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05