锚点定位的三种解决方法

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

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

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); //返回整个 URLconsole.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号,得到是#box1var 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

锚点定位的三种解决方法相关推荐

服务器安装系统提示无法创建新的系统分区,Win10系统安装时提示无法创建新的系统分区也无法定位现有的分区的三种解决方法...
部分用户在安装Windows10系统时,却遇到"无法创建分区也找不到现有的分区"提示,无法继续安装.这该怎么办呢?对于该问题大家可以参考以下方法来解决. 1.格式化整个硬盘,重新分 ...
打开计算机后无法最小化,最小化窗口后无法在任务栏中显示的三种解决方法...
[文章导读]最近有用户反映打开的窗口最小化后无法在任务栏中显示,通常情况下点击程序的最小化按钮都会显示在任务栏中,方便我们点击再次打开. 最近有用户反映打开的窗口最小化后无法在任务栏中显示,通常情况下 ...
PHP no input file specified 三种解决方法
PHP no input file specified 三种解决方法参考文章: (1)PHP no input file specified 三种解决方法 (2)https://www.cnblog ...
MapperException: 无法获取实体类xxxxx对应的表名! 三种解决方法，总有一款适合你。
MapperException: 无法获取实体类xxxxx对应的表名! 三种解决方法,总有一款适合你. 参考文章: (1)MapperException: 无法获取实体类xxxxx对应的表名! 三种解 ...
html没有注册类,电脑中ie浏览器提示没有注册类别的三种解决方法
ie浏览器功能十分强大,能够给我们带来很棒的网页浏览体验.不过,一些朋友反馈自己在使用ie浏览器过程中,突然遇到"没有注册类别"的出错提示,这是怎么回事呢?其实这是文件的丢失等原因 ...
linux电脑滚轮不能用,图文详解电脑鼠标滚轮不动了怎么办_电脑鼠标滚轮不能用的三种解决方法－系统城...
近期,许多小伙伴发现电脑鼠标滚轮失灵了,无缘无故的就无法使用,浏览网页玩游戏都没办法继续进行,真的很麻烦.针对电脑鼠标滚轮不动了的故障,小编收集整理具体原因和解决方法给大家,希望大家采纳! 原因一:鼠 ...
计算机键盘输入错乱,win10电脑键盘错乱的三种解决方法
近期,看到许多小伙伴抱怨说win10电脑更新后键盘错乱了,平时聊天.玩游戏都会用到键盘,键盘错乱严重影响使用体验,有什么办法解决呢?其实可以试试更新驱动,或者杀毒一下,下面一起来看看具体的三种解决方法 ...
outlook邮箱邮件大小限制_Office Outlook 2010、2013附件大小超过了允许的范围限制三种解决方法图解...
在outlook2010.2013中添加附件超过20M,就会提示:"附件大小超出了允许的范围"! outlook2007的附件默认大小是150M,而outlook2010.2013 ...
outlook邮箱邮件大小限制_Office Outlook 2010、2013附件大小超过了允许的范围限制三种解决方法图解 – 爱分享...
在outlook2010.2013中添加附件超过20M,就会提示:"附件大小超出了允许的范围"! outlook2007的附件默认大小是150M,而outlook2010.2013 ...

锚点定位的三种解决方法

锚点定位的三种解决方法相关推荐

最新文章

热门文章