因為在項目中遇到錨點定位的問題，覺得有必要單獨成文，來介紹錨點定位的解決辦法。
一 學習錨點定位之前的知識儲備:
1.1 #號的作用
#代表網頁中的一個位置。其右面的字符，就是該位置的標識符。比如，http://www.example.com/index.html#print
就代表網頁index.html的print位置。瀏覽器讀取這個URL后，會自動將print位置滾動至可視區域。
為網頁位置指定標識符，有兩個方法:
一是使用錨點，比如<a name="print"></a>，
二是使用id屬性，比如<div id="print">。
HTTP請求不包括#.
2.2 a元素與URL對象
URL對象是瀏覽器的原生對象，可以用來構造、解析和編碼 URL。一般情況下，通過window.URL可以拿到這個對象。
<a>元素和<area>元素都部署了這個接口。這就是說，
它們的 DOM 節點對象可以使用 URL 的實例屬性和方法。
關於URL實例化對象的屬性與方法請參考:
全文地址請點擊：
https://blog.csdn.net/weixin_42839080/article/details/82714503?utm_source=copy
例如:我們利用a標簽來獲取一些東西
// <a href="#box1">我跳到box1</a> // 上面時html代碼 var a = document.querySelector('a'); console.log(a.href); //返回整個 URL console.log(a.hash); //返回片段識別符，以井號#開頭 console.log(a.hostname); //返回域名 console.log(a.search); //返回查詢字符串，以問號?開頭
二 錨點定位的介紹：
錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。
// 錨點跳轉有兩種形式：
*1. a標簽 + name / href 屬性
*2. 使用標簽的id屬性
2.1 第一種錨點定位的方法:
<a href="#box1">我跳到box1</a> <a href="#" name="#box2">我跳到box2</a> <div id="box1"></div> <div id="box2"></div>
下面是在頁面的效果表現:
上面這一種的缺點是,url會發生改變,會在url最后面加上片段識別符#box2,這樣就改變了URL的路徑,這是我們不想看到的.因為再次刷新的時候回出現問題.
2.2 第二種錨點定位的方法:
只需加上下面的JS代碼就可以了.
jQuery的書寫方法
<script> $('a').on('click',function(e){ //阻止a標簽的默認行為跳轉,這樣就不會把#判斷符帶入到url中 e = e || window.event; e.preventDefault(); // 獲取id號,得到是#box1 var target = $(this).prop('hash'); //將頁面滾動到對應的位置 $('html,body').scrollTop($(target).offset().top); }); </script>
原生的寫法:
<script> var aList = document.querySelectorAll('a'); //給每一個a標簽注冊點擊事件 for( var i=0;i < aList.length;i++){ aList[i].addEventListener('click', function(e){ //阻止a標簽的默認行為 e = e || window.event; e.preventDefault(); //獲取整個href路徑 //var target = this.href; //獲取#片段識別符 var target = this.hash; //獲取box參照於body定位的top值 var offsetTop = document.querySelector(target).offsetTop; //將頁面跳轉到對應的位置 document.documentElement.scrollTop = offsetTop; }); } </script>
注意點:
**1. 這種方法url不會發生改變,因為我們阻止了a標簽的默認行為.所以a標簽不會跳轉.
**2. document.querySelector(target).offsetTop;
$(target).offset().top 都是去求出盒子參照body定位對應的top值,這是因為offet家族的定義是:
如果元素自身是非固定定位,並且所有的父元素都沒有定位，那么他的定位父級是body .
**3. 上面代碼的target得到格式都是#box1,此時在原生中利用屬性選擇器來獲取元素要很多.
document.querySelector(target) 等價於document.querySelector('#box1')
2.3 第三種錨點定位的方法:
用js的srollIntoView方法
這是一個實驗中的功能
此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合
使用的前綴。由於該功能對應的標准文檔可能被重新修訂，所以在未來版本的瀏覽器
中該功能的語法和行為可能隨之改變。
具體參照:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
//使用此功能得到上面的效果
var element = document.getElementById('box1');
element.scrollIntoView();
錨點的定位案例可以參考:
https://blog.csdn.net/weixin_42839080/article/details/82808326
這里做了一個點擊導航欄里的文字頁面滾動到指定的位置,同時頁面滾動到指定位置,對應的導航欄部分高亮.
關於需求: 我點擊導航欄里面的li標簽,頁面跳轉到對應的位置;當頁面滑動的時候,對應的導航欄li標簽高亮.
function scrollHighLight () { // 點擊對應的nav里的li標簽,頁面就滾動到哪里 $('.navbar-nav > li').click(function(event) { //li標簽里面有a標簽,可以阻止到a標簽的默認行為 event.preventDefault(); //這里找到的是target #后面的內容 var target = $(this).find('a').prop('hash'); //將頁面動畫滾動到指定位置 $('html, body').animate({ scrollTop: $(target).offset().top }, 500); }); //頁面滾動到哪,對應的nav里的li就高亮 $(window).on('scroll',function(){ //獲取頁面滾動高度 var pageScrollTop = $('html,body').scrollTop(); //獲取遍歷a標簽找到hash值 $('.navbar-right > li > a').each(function(index,ele){ // 頁面最后一個a不是高亮的內容,所以直接跳出函數 if(index == $('.navbar-right > li > a').length - 1) { return; } // 獲取hash值 var target = $(this).prop('hash'); // 判斷section距離頁面的高度與頁面滾動高度比較 if($(target).offset().top - pageScrollTop < 0) { // 給對應的li高亮操作 $(this).parent('li').siblings().removeClass('active'); $(this).parent('li').addClass('active'); }; }); }); }
錨點定位的案例:
gitHub: https://github.com/Alex-Li2018/xiaofengche-Project
————————————————
版權聲明：本文為CSDN博主「風銘大師」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42839080/article/details/82825295