頁面內錨點定位及跳轉方法總結（推薦）
接著上一篇，其實是一個功能，本來感覺挺簡單的一個問題，沒想到遇到兩個坎兒，無語。。。
上一篇是關于scroll事件綁定的問題，這一篇的問題是：點擊錨點跳轉到相應DIV的問題。
最簡單的方法是錨點用<a>標簽，在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>
這種方法的缺點是點擊錨點之后，瀏覽器的URL會發(fā)生變化，如果刷新可能會出現問題?！?/p>
第二種方式是在js事件中通過window.location.hash="divId"跳轉，但地址也會發(fā)生變化，感覺跟第一種方法沒區(qū)別，甚至更麻煩。
第三種方法是用animate屬性，當點擊錨點后，頁面滾動到相應的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>
注意：運行上面的腳本的之前，先將為錨點增加相應的id，同時去掉href屬性?！ ?/p>
$("html, body")可以替換為響應的div，如果不起作用，試著給該div增加overflow：scroll屬性。
另外，腳本可以進一步優(yōu)化，自己來試試
這樣做的好處是：URL地址不會變，同時點擊錨點時會自動響應scroll事件，不需要重新綁定。
缺點是：如果頁面復雜的話，偏移值可能會發(fā)生變化需要算法輔助。
第四種方法是用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();
這種方法的好處，是URL不會變，同時能夠響應相應的scroll事件，不需要算法什么的。
推介大家用第四種，我依次試了前三種，都有各種問題（可能是頁面較復雜的緣故吧，當然，技術不咋也是。。。）
以上所述是小編給大家介紹的頁面內錨點定位及跳轉方法總結詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
在vue項目開發(fā)中,我們需要對數組進行處理等問題,這里簡單記錄遍歷數組的幾種方法,這篇文章主要給大家介紹了關于vue中數組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
現在很多14寸的筆記本，出廠默認就是150%的顯示。導致很多時候我們的項目，自己開發(fā)的時候都是按照100%比例來開發(fā)的，上線了就會發(fā)現這個問題，今天就這個問題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vue+EleMentUI實現el-table-colum表格select下拉框可編輯功能實例
這篇文章主要給大家介紹了關于Vue+EleMentUI實現el-table-colum表格select下拉框可編輯功能的相關資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-07-07
provide和inject在Vue 2中已經被廣泛應用，不是新鮮API，3.0重新認識一下它們兩個，本文重點給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧2021-07-07
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文詳細介紹了如何在Vue3項目中創(chuàng)建自定義指令directive1,首先,在src/directives/index.ts文件中引入自定義指令,然后,創(chuàng)建src/directives/permission.ts文件來定義具體指令邏輯,在main.ts文件中引入并注冊該指令,最后,在頁面中使用自定義指令2024-12-12
這篇文章主要為大家詳細介紹了vue文件樹組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
淺談vue項目利用Hbuilder打包成APP流程,以及遇到的坑
這篇文章主要介紹了淺談vue項目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element-ui和vue表單(對話框)驗證提示語(殘留)清除操作
這篇文章主要介紹了element-ui和vue表單(對話框)驗證提示語(殘留)清除操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09