溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關web開發中頁面內錨點定位及跳轉方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
最簡單的方法是錨點用<a>標簽，在href屬性中寫入DIV的id。如下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h3 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h3>
<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>
</h3>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>這種方法的缺點是點擊錨點之后，瀏覽器的URL會發生變化，如果刷新可能會出現問題。
第二種方式是在js事件中通過window.location.hash="divId"跳轉，但地址也會發生變化，感覺跟第一種方法沒區別，甚至更麻煩。
第三種方法是用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屬性。
$("html, body")可以替換為響應的div，如果不起作用，試著給該div增加overflow：scroll屬性。
另外，腳本可以進一步優化，自己來試試
這樣做的好處是：URL地址不會變，同時點擊錨點時會自動響應scroll事件，不需要重新綁定。
缺點是：如果頁面復雜的話，偏移值可能會發生變化需要算法輔助。
第四種方法是用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();這種方法的好處，是URL不會變，同時能夠響應相應的scroll事件，不需要算法什么的。
關于“web開發中頁面內錨點定位及跳轉方法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
