一 学习锚点定位之前的知识储备:
1.1 #号的作用
#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print
就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。
为网页位置指定标识符，有两个方法:
一是使用锚点，比如<a name="print"></a>，
二是使用id属性，比如<div id="print">。
- 1
- 2
HTTP请求不包括#.
2.2 a元素与URL对象
URL对象是浏览器的原生对象，可以用来构造、解析和编码 URL。一般情况下，通过window.URL可以拿到这个对象。
<a>元素和<area>元素都部署了这个接口。这就是说，
它们的 DOM 节点对象可以使用 URL 的实例属性和方法。
- 1
- 2
- 1
- 2
关于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<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回整个 URL</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>hash<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回片段识别符，以井号#开头</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>hostname<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回域名</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>search<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回查询字符串，以问号?开头</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
二 锚点定位的介绍：
锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。
// 锚点跳转有两种形式：
*1. a标签 + name / href 属性
*2. 使用标签的id属性
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
2.1 第一种锚点定位的方法:
<a href="#box1">我跳到box1</a> <a href="#" name="#box2">我跳到box2</a><div id="box1"></div> <div id="box2"></div>
- 1
- 2
- 3
- 4
- 5
下面是在页面的效果表现:
上面这一种的缺点是,url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的.因为再次刷新的时候回出现问题.
2.2 第二种锚点定位的方法:
只需加上下面的JS代码就可以了.
jQuery的书写方法
<script> $('a').on('click',function(e){<span class="token comment">//阻止a标签的默认行为跳转,这样就不会把#判断符带入到url中</span> e <span class="token operator">=</span> e <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取id号,得到是#box1</span> <span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'hash'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将页面滚动到对应的位置</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html,body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
原生的写法:
<script> var aList = document.querySelectorAll('a'); //给每一个a标签注册点击事件 for( var i=0;i < aList.length;i++){ aList[i].addEventListener('click', function(e){<span class="token comment">//阻止a标签的默认行为</span> e <span class="token operator">=</span> e <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取整个href路径</span> <span class="token comment">//var target = this.href;</span> <span class="token comment">//获取#片段识别符</span> <span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">;</span> <span class="token comment">//获取box参照于body定位的top值</span> <span class="token keyword">var</span> offsetTop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span>offsetTop<span class="token punctuation">;</span> <span class="token comment">//将页面跳转到对应的位置</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> offsetTop<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
注意点:
**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')
- 1
- 2
- 1
- 2
2.3 第三种锚点定位的方法:
用js的srollIntoView方法
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合
使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器
中该功能的语法和行为可能随之改变。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
具体参照:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
//使用此功能得到上面的效果
var element = document.getElementById('box1');
element.scrollIntoView();
- 1
- 2
- 3
锚点的定位案例可以参考:
https://blog.csdn.net/weixin_42839080/article/details/82808326
这里做了一个点击导航栏里的文字页面滚动到指定的位置,同时页面滚动到指定位置,对应的导航栏部分高亮.
小风车科技官网模拟里锚点定位的问题:
关于需求: 我点击导航栏里面的li标签,页面跳转到对应的位置;当页面滑动的时候,对应的导航栏li标签高亮.
function scrollHighLight () {<span class="token comment">// 点击对应的nav里的li标签,页面就滚动到哪里</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.navbar-nav > li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//li标签里面有a标签,可以阻止到a标签的默认行为</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//这里找到的是target #后面的内容</span> <span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'hash'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将页面动画滚动到指定位置</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html, body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> scrollTop<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
//页面滚动到哪,对应的nav里的li就高亮
$(window).on(‘scroll’,function(){
<span class="token comment">//获取页面滚动高度</span>
<span class="token keyword">var</span> pageScrollTop <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'html,body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//获取遍历a标签找到hash值</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.navbar-right > li > a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span>ele<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">// 页面最后一个a不是高亮的内容,所以直接跳出函数</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>index <span class="token operator">==</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.navbar-right > li > a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 获取hash值</span>
<span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">'hash'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 判断section距离页面的高度与页面滚动高度比较</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">offset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top <span class="token operator">-</span> pageScrollTop <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 给对应的li高亮操作</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">siblings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
锚点定位的案例:
gitHub: https://github.com/Alex-Li2018/xiaofengche-Project
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-8cccb36679.css" rel="stylesheet">
</div>
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
