关于CSS锚点的使用

1.CSS锚点使用有两种方法，我建议使用下面这种：

<a href='#one'>到达第一个锚点</a>

<a href='#two'>到达第二个锚点</a>

<div id='one'>我是第一个锚点</div>

<div id='two'>我是第一个锚点</div>

这样当我们点击A链接时，对应的DOM节点就会滚动到窗口顶部。

但有时我们的需求并不是让它滚动到窗口顶部。可能要他距离顶部有一定的距离。这时候可以由以下方法解决。

<a href='#one'>到达第一个锚点</a>

<a href='#two'>到达第二个锚点</a>

<div >我是第一个需要滚动的内容</div>

<div >我是第二个需要滚动的内容</div>

这样就可以达到滚动后距离顶部200px的效果。而不影响原页面的样式

关于CSS锚点的使用相关推荐

html也没锚点,css 锚点定位不了
css 锚点定位不了 css 锚点定位不了只有一个原因,就是书写错误,锚点的正确书写方式有两种,下面为各位介绍一下. 1.使用a标签设置锚点: ①:设置一个锚点链接 html:(注意:href属性的属 ...
为什么定位不了HTML,css 锚点定位不了
css 锚点定位不了 css 锚点定位不了只有一个原因,就是书写错误,锚点的正确书写方式有两种,下面为各位介绍一下. 1.使用a标签设置锚点: ①:设置一个锚点链接 html:(注意:href属性的属 ...
css锚点定位不准确问题
现象:当顶部导航栏固定时,点击锚点,会跳转到锚点以下. #top{position: fixed;height: 100px;top:0;left:0;z-index: 100;} 问题原因点击超链 ...
纯css锚点跳转过渡效果 - 神奇的scroll-behavior属性
我们在浏览网站时,经常会看到返回顶部和楼层跳转的效果,但是这些大部分都是通过js来实现的.那么不用js也可以实现吗?答案是可以的. ok,先上代码,下面再进行了解! html: <!DOCTYP ...
html/css 锚点链接
锚点链接:是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 什么是锚点:定位器不跨页锚点设置锚点链接的方法: <标记 id=&qu ...
html+css(锚点的使用)
命名锚点的作用:在同一页面内的不同位置进行跳转. 通俗理解:可以通过锚点跳转到页面中的其他位置,当页面过长时,可以将页面分为几部分,通过顶部设置一些锚点,点击可以方便浏览者快速定位到相应的位置. 制作 ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
【网页前端设计Front end】CSS入门（看不懂你来打我）
文章目录 **css的基本语法和使用方法** **css的层次及其作用优先级** **css常用属性** **css布局** css的基本语法和使用方法 /*选择符组*/ /*类选择符*/ /*id选 ...
纯CSS实现返回顶部的功能
下面是 css 锚点跳转的一个例子: <style>#page-1 {width: 100%;height: 800px;background: red;font-size: 120px; ...

关于CSS锚点的使用

关于CSS锚点的使用相关推荐

最新文章

热门文章