现象：当顶部导航栏固定时，点击锚点，会跳转到锚点以下。

#top{position: fixed;height: 100px;top:0;left:0;z-index: 100;}

问题原因

点击超链接之后，跳到的锚点位置向下的偏移量就是fixed的头部的高度。

问题解决

1、设置所有锚点处的样式

css padding-top:100px; margin-top:-100px;

2、使用:target伪类
target指当前路径hash指定的元素的样式

css :target{ padding-top:44px; }

３、使用jquery
指定每个链接点击之后的事件，使用js的scrollTo和scrollBy两个函数实现跳转，这种方法最为灵活，且能够以动画的形式跳转。

目前的解决方案是：使用js，读取传过来的hash值：#target，手动的滚动到目标位置；var hash = window.location.hash;
if ( hash === '#target' )
{window.location.hash = '';  //防止刷新时，又回到锚点处window.scrollTo(0, 675);
}

锚点定位的三种方法

（1）id定位，指定锚点的id，这种方法可以实现将锚点元素绑定到任意元素上

<code class="hljs"><a href="#one">one</a>
<div id="one">one</div> </code>

（2）name定位，只能针对a标签来定位，对其他标签不能起到定位作用。
plain <a href="#one">one</a> ...... <div><a name='one'></a>one</div>
（3）万能的js定位，获取元素位置
使用document.querySelector(sel)获取元素
使用element.offsetTop,element.offsetLeft获取元素位置
使用scrollTo（也可以用scrollBy）函数滚动到指定位置

或者使用scrollInToView(); //准确的说，这种方法不属于锚点定位

关于scrollIntoView()方法，在原生DOM下好用，但是jquery不支持；

滚动条的行为：默认把hash元素放在页面最上方，除非已经到达底部了。

参考博客：

https://www.cnblogs.com/shixiaomiao/p/5208098.html

https://blog.csdn.net/weixin_34203426/article/details/86031169

css锚点定位不准确问题相关推荐

html也没锚点,css 锚点定位不了
css 锚点定位不了 css 锚点定位不了只有一个原因,就是书写错误,锚点的正确书写方式有两种,下面为各位介绍一下. 1.使用a标签设置锚点: ①:设置一个锚点链接 html:(注意:href属性的属 ...
为什么定位不了HTML,css 锚点定位不了
css 锚点定位不了 css 锚点定位不了只有一个原因,就是书写错误,锚点的正确书写方式有两种,下面为各位介绍一下. 1.使用a标签设置锚点: ①:设置一个锚点链接 html:(注意:href属性的属 ...
html锚点定位向下偏移,html锚点定位不准确问题
#问题描述当顶部固定时,点击锚点,会跳转到锚点以下. #one,#two,#three{ height: 500px; } #top{ position: fixed; height: 100px; ...
html锚点定位不准确问题
问题描述当顶部固定时,点击锚点,会跳转到锚点以下. <style>#one,#two,#three{height: 500px;}#top{position: fixed;height: ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
css怎样锚定位,CSS：如何定位内部锚
跨度或DIV我有这种情况:CSS:如何定位内部锚 Notifications 这将产生以下: a.messages{ background: url(../img/Footer/iconMail.pn ...
html 标签、图像、链接、注释、锚点定位、特殊字符
常用的 html 标签 <h1>h1标题</h1> <div>这是一个div标签</div> <p ...
如何用html语言定位img,html经常使用标签(图像标签img，连接标签a，锚点定位，及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...

css锚点定位不准确问题

问题原因

问题解决

锚点定位的三种方法

css锚点定位不准确问题相关推荐

最新文章

热门文章