锚点定位的三种解决方法

墨蓝 2021-09-19 23:48 488阅读 0赞

因为在项目中遇到锚点定位的问题，觉得有必要单独成文，来介绍锚点定位的解决办法。

## 一.习锚点定位之前的知识储备: ##

### 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` 的实例属性和方法。

例如:我们利用`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); //返回查询字符串，以问号?开头

![在这里插入图片描述][20190612222249950.png]

## 二 锚点定位的介绍： ##

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。

// 锚点跳转有两种形式：
     
       *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`的路径,这是我们不想看到的.因为再次刷新的时候回出现问题.  
![在这里插入图片描述][20190611220008913.gif]

### 2.2 第二种锚点定位的方法: ###

只需加上下面的JS代码就可以了.

**jQuery的书写方法**

原生的写法:

注意点:

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][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][https_blog.csdn.net_weixin_42839080_article_details_82808326]

这里做了一个点击导航栏里的文字页面滚动到指定的位置,同时页面滚动到指定位置,对应的导航栏部分高亮.

小风车科技官网模拟里锚点定位的问题:

关于需求: 我点击导航栏里面的`li`标签,页面跳转到对应的位置;当页面滑动的时候,对应的导航栏li标签高亮.

[20190612222249950.png]: /images/20210626/bd2f9e6e93be4eb486ea34e1cb9ec14b.png
[20190611220008913.gif]: /images/20210626/27bebb9d3918446c8921175322cf2637.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Element_scrollIntoView]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
[https_blog.csdn.net_weixin_42839080_article_details_82808326]: https://blog.csdn.net/weixin_42839080/article/details/82808326