一 學(xué)習(xí)錨點定位之前的知識儲備:
1.1 #號的作用
#代表網(wǎng)頁中的一個位置。其右面的字符，就是該位置的標(biāo)識符。
就代表網(wǎng)頁index.html的print位置。瀏覽器讀取這個URL后，會自動將print位置滾動至可視區(qū)域。
為網(wǎng)頁位置指定標(biāo)識符，有兩個方法:
一是使用錨點，比如<a name="print"></a>， 二是使用id屬性，比如<div id="print">。
HTTP請求不包括#.
2.2 a元素與URL對象 URL對象是瀏覽器的原生對象，可以用來構(gòu)造、解析和編碼 URL。一般情況下，通過window.URL可以拿到這個對象。 <a>元素和<area>元素都部署了這個接口。這就是說， 它們的 DOM 節(jié)點對象可以使用 URL 的實例屬性和方法。
例如:我們利用a標(biāo)簽來獲取一些東西
// <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); //返回查詢字符串，以問號?開頭
二 錨點定位的介紹：
錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經(jīng)常見到。
// 錨點跳轉(zhuǎn)有兩種形式： *1. a標(biāo)簽 + name / href 屬性 *2. 使用標(biāo)簽的id屬性
2.1 種錨點定位的方法:
<a href="#box1">我跳到box1</a> <a href="#" name="#box2">我跳到box2</a> <div id="box1"></div> <div id="box2"></div>
下面是在頁面的效果表現(xiàn):
上面這一種的缺點是,url會發(fā)生改變,會在url面加上片段識別符#box2,這樣就改變了URL的路徑,這是我們不想看到的.因為再次刷新的時候回出現(xiàn)問題.
2.2 第二種錨點定位的方法:
只需加上下面的JS代碼就可以了.
jQuery的書寫方法
<script>
$('a').on('click',function(e){
//阻止a標(biāo)簽的默認(rèn)行為跳轉(zhuǎn),這樣就不會把#判斷符帶入到url中
e = e || window.event;
e.preventDefault();
// 獲取id號,得到是#box1
var target = $(this).prop('hash');
//將頁面滾動到對應(yīng)的位置
$('html,body').scrollTop($(target).offset().top);
});
</script>
原生的寫法:
<script>
var aList = document.querySelectorAll('a');
//給每一個a標(biāo)簽注冊點擊事件
for( var i=0;i < aList.length;i++){
aList[i].addEventListener('click', function(e){
//阻止a標(biāo)簽的默認(rèn)行為
e = e || window.event;
e.preventDefault();
//獲取整個href路徑
//var target = this.href;
//獲取#片段識別符
var target = this.hash;
//獲取box參照于body定位的top值
var offsetTop = document.querySelector(target).offsetTop;
//將頁面跳轉(zhuǎn)到對應(yīng)的位置
document.documentElement.scrollTop = offsetTop;
});
}
</script>
注意點:
**1. 這種方法url不會發(fā)生改變,因為我們阻止了a標(biāo)簽的默認(rèn)行為.所以a標(biāo)簽不會跳轉(zhuǎn).
**2. document.querySelector(target).offsetTop;
$(target).offset().top 都是去求出盒子參照body定位對應(yīng)的top值,這是因為offet家族的定義是:
如果元素自身是非固定定位,并且所有的父元素都沒有定位，那么他的定位父級是body .
**3. 上面代碼的target得到格式都是#box1,此時在原生中利用屬性選擇器來獲取元素要很多.
document.querySelector(target) 等價于
document.querySelector('#box1')
2.3 第三種錨點定位的方法:
用js的srollIntoView方法
這是一個實驗中的功能
此功能某些瀏覽器尚在開發(fā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合
使用的前綴。由于該功能對應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來版本的瀏覽器
中該功能的語法和行為可能隨之改變。
//使用此功能得到上面的效果
var element = document.getElementById('box1');
element.scrollIntoView();
這里做了一個點擊導(dǎo)航欄里的文字頁面滾動到指定的位置,同時頁面滾動到指定位置,對應(yīng)的導(dǎo)航欄部分高亮.
模擬里錨點定位的問題:
關(guān)于需求: 我點擊導(dǎo)航欄里面的li標(biāo)簽,頁面跳轉(zhuǎn)到對應(yīng)的位置;當(dāng)頁面滑動的時候,對應(yīng)的導(dǎo)航欄li標(biāo)簽高亮.
function scrollHighLight () {
// 點擊對應(yīng)的nav里的li標(biāo)簽,頁面就滾動到哪里
$('.navbar-nav > li').click(function(event) {
//li標(biāo)簽里面有a標(biāo)簽,可以阻止到a標(biāo)簽的默認(rèn)行為
event.preventDefault();
//這里找到的是target #后面的內(nèi)容
var target = $(this).find('a').prop('hash');
//將頁面動畫滾動到指定位置
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
//頁面滾動到哪,對應(yīng)的nav里的li就高亮
$(window).on('scroll',function(){
//獲取頁面滾動高度
var pageScrollTop = $('html,body').scrollTop();
//獲取遍歷a標(biāo)簽找到hash值
$('.navbar-right > li > a').each(function(index,ele){
// 頁面一個a不是高亮的內(nèi)容,所以直接跳出函數(shù)
if(index == $('.navbar-right > li > a').length - 1) {
return;
}
// 獲取hash值
var target = $(this).prop('hash');
// 判斷section距離頁面的高度與頁面滾動高度比較
if($(target).offset().top - pageScrollTop < 0) {
// 給對應(yīng)的li高亮操作
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
};
});
});
}
想要了解更多的java應(yīng)用技術(shù)那就加入我們吧！