錨點定位的三種解決方法

因為在項目中遇到錨點定位的問題，覺得有必要單獨成文，來介紹錨點定位的解決辦法。

一 學習錨點定位之前的知識儲備:

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>
————————————————
版權聲明：本文為CSDN博主「風銘大師」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42839080/article/details/82825295

 

原生的寫法:

<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