HTML锚点定位+平滑滚动

已于 2023-06-04 10:38:28 修改
阅读量2.3k 收藏 8
点赞数 2
文章标签： html5 css3
于 2023-02-08 18:57:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64520392/article/details/128941349
版权

锚点定位属于是一种比较简单且使用频繁的技能，多用在目录和正文之间的跳转。

  1. html-代码

<div class="content">
            <h2 id="title1">标题一</h2>
            <div class="placeholder"></div>
            <h2 id="title2">标题二</h2>
            <div class="placeholder"></div>
            <h2 id="title3">标题三</h2>
            <div class="placeholder"></div>
          </div>
          <!-- 目录 -->
          <ul class="index">
            <li><a href="#title1">标题一</a></li>
            <li><a href="#title2">标题二</a></li>
            <li><a href="#title3">标题三</a></li>
            <li><a href="#" rel="internal">返回顶部</a></li>
          </ul>
</div>

  1. css-代码

 html {
      scroll-behavior: smooth;
    }
    .index {
      position: fixed;
      right: 20px;
      bottom: 30px;
    }
    .placeholder {
      width: 100%;
      height: 400px;
      background-color: green;
    }
通过a标签的href属性实现锚点定位，然后设置scroll-behavior为smooth实现滚动条平滑滚动。

还有第二种方式 html给我们提供了一个书签链接 ，什么事书签链接呢 看一下面的代码你就明白了

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>书签链接</title>
</head>
<body>
    <ol type="I">
        <li>
            <a href="#top100">100</a>
        </li>
    </ol>
    <ul tyep="square">
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top100">100</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
    </ul>
</body>
</html>

点我点击ol 里面的100 他会自动滚动到 ul 的100哪里。是不是比上面的方式差不多，但是我更推荐你们使用这种方式。

如果你想要跳转界面，而且又想跳到指定位置，可以这样写。

这是data1页面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data_1</title>
</head>
<body>
    <ol type="I">
        <li>
            <a href="data_2.html#top100">100</a>
        </li>
    </ol>
</body>
</html>

这是data2页面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data_2</title>
</head>
<body>
    <ul tyep="square">
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top100">100</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
        <li><a name="top56">1</a></li>
    </ul>
</body>
</html>

当你点击data1里的100时 会跳到 data2页面，而且会自动滚动到100 哪里。

如果有书写错误还请帮忙指出 感谢 感谢！！！

html页面内锚点定位显示
kerryqpw的博客
04-12 9228
html页面内锚点定位显示
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
01-19
1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下： 1、html结构（因为从项目里截取代码，allMenuList数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和...
html 锚点平滑滚动到目标位置
坏蛋阿土的博客
07-22 940
这段代码要放在body的后面，否则找不到元素。
html之锚链接
最新发布
2301_81968528的博客
04-04 252
a href="目标html文件名#锚点名称">锚点链接文本<a>创建页面间锚点和页面内锚点类似，只是在锚链接语法格式要修改。<a href="#锚点名称">锚点链接文本<a><a name="锚点名称">锚点内容<a>锚链接，简单说就是点击链接后跳转到指定位置。还拿上面做例子，假定文件名是01.html。接着要创建人物生平的锚点。比如说要创建一个锚点。整个html代码如下。
html页面滚动 锚点,页面实现锚点滚动的滑动效果
weixin_39669638的博客
06-03 3925
实现锚点滚动，需要两个方面的因素：1，锚，即我们点击的地方。2，目标位置，即页面需要滚动的距离。1 锚点 anchor通俗的讲就是导航，如百度百科的我们可以点击右侧的锚点，从而使得页面滚动到指定的位置。锚点相对比较容易，我们只需要在对应的位置加上事件即可，给每个需要滚动锚点加绑定滚动的方法。2.目标距离如何计算需要滚动的距离，准确定位锚点的位置，计算公式为：需要滚动的距离 = 滚动区域内锚点之上的...
html设置锚点，滚动到指定的位置
MtangEr的博客
05-07 4634
一、页面内跳转的锚点设置 页面内的跳转需要两步： 方法一： ①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#） ②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性...
锚点定位 滚动条平滑滚动的方式
逆风优雅的博客
06-30 1071
window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。behavior 属性表示滚动行为，其类型为 String，可选值有 3 个：smooth (平滑滚动 )、instant (瞬间滚动)、auto (默认值)。该方法支持传入一个 scrollIntoViewOptions 对象，其中的 behavior 属性定义滚动时的动画过渡效果，可选值为 auto 或 smooth，默认值为 auto，无动画效果；
基于vue监听滚动事件实现锚点链接平滑滚动的方法
08-28
在现代网页设计中，为了提升用户体验，常常需要在页面内实现平滑滚动的效果，尤其是当涉及到锚点链接跳转时。本文将详细介绍一种基于Vue.js框架实现锚点链接平滑滚动的方法，该方法不仅具有很高的实用价值，而且可以...
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
12-30
1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下： 1、html结构（因为从项目里截取代码数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和类名别弄错就行...
【前端】css 锚点定位点击之后的滚动行为
weixin_45208537的博客
12-14 399
锚点滚动将触发滚动行为。请注意，任何其他滚动（例如用户执行的滚动）都不受此属性的影响。在根元素上指定此属性时，它将改为应用于视区。在 body 元素不会 not 传播到视区。如果要整体页面滚动 需要添加到根节点html上。这 scroll-behavior CSS 属性设置导航或 CSSOM 滚动 API 触发滚动时滚动框的行为。
html的滚屏效果遇上锚点,html5中锚点滚动
weixin_30564447的博客
06-03 681
1、通过a标签实现锚点，将a标签的href属性取值为所要链接到的块的id选择器缺点：它会改变urllightbluelightgreenlightpinklightsalmon2、通过Element.scrollIntoView()Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。语法：Element.scrollIntoView({behavior：...
smooth-scroll:用于 html 锚点的简单平滑滚动库
06-18
平滑滚动 一个用于 html 锚点的简单 javascript 平滑滚动库。 该脚本改编自 重量非常轻（仅缩小 2KB，不需要 jQuery） 滚动速度自然缓和 包含脚本并且它可以工作（请参阅源文件中的Scroller.init() ） 变化： 添加元素 ID 作为可能的目标 仅用于具有现有目标的元素 原始许可证： 版权所有 (c) 2007，DezinerFolio Inc。保留所有权利。 如果满足以下条件，则允许以源代码和二进制形式重新分发和使用，无论是否修改： 源代码的重新分发必须保留上述版权声明、此条件列表和以下免责声明。 以二进制形式重新分发必须在随分发提供的文档和/或其他材料中复制上述版权声明、此条件列表和以下免责声明。 未经事先明确书面许可，不得使用 DezinerFolio 的名称或其贡献者的名称来认可或推广源自该软件的产品。 本软件由版权所有者和贡献者“
html锚点 缓动,快速制作页面滚动（锚点定位）效果
weixin_33346418的博客
06-23 1711
当页面中内容过多时，我们常常会采用各种方式帮助用户快速定位到页面中的内容，如提供内容菜单、定位按钮、悬浮的导航栏等等。如果你想在设计项目中呈现这些效果，摹客在线设计就能帮你轻松做到。页面整体滚动制作页面滚动效果，需要用到交互命令“滚动”。首先，为页面中的组件添加交互，以作为交互目标的组件充当锚点(即页面滚动的目标位置)，如下图中的橙色圆圈。在交互弹窗中，选择命令“滚动”，还可以对滚动方式进行更详细...
html中设置锚点定位
dixie7674的博客
05-05 167
1、使用id定位： (这样的定位可以针对任何标签来定位。 ) <a name="1F" href="#1F">锚点1</a> <div id="1F">锚点1内容</div> 2、使用name定位： （使用name属性只能针对a标签来定位，而对其他标签就不能起到定位作用。 ） <a href="#5F"&gt...
js实现页面锚点定位动画滚动
dgjvlz1669的博客
08-10 784
项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现.. 上干货.. 1 function scrollTo(y, duration) { 2 　　/*y:目标纵坐标,duration:时间(毫秒)*/ 3 　　var scrollTop = document.body.scrollTop;/*页面当前滚动距离*/ 4 ...
锚点滚动效果
艾小逗
04-15 267
锚点滚动效果 点击锚点后滚动效果 $('a[href*=#],area[href*=#]').click(function() { if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { va...
html 锚点定位
qq_40281275的博客
08-20 2170
//点击a连接直接跳转到运动鞋 //点击a标签跳转到名叫day1html文件里并且跳转到运动鞋 哈哈哈哈 哈哈哈哈 哈哈哈哈 运动鞋 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdo...
html-锚点定位跳转代码
qq_36522566的博客
07-01 908
给定位点设置一个标签 并将标签的href（链接地址）设置成#.....给要跳转的位置设置一个ID值，将俞要跳转内容点击点的href地址设置成对应跳转位置的ID值即可实现描点定位功能
4种方法实现html 页面内锚点定位及跳转
阿牛哥的博客
08-25 9419
scrollIntoView()是 HTML 元素的一个方法，假如我们有一个元素容器出现了滚动条，有滚动条必然就有一些元素是不可见的，为了让隐藏的元素可见，我们可以手动滚动滚动条，让元素出现，另一种方法就是调用隐藏元素的 scrollIntoView 方法，让它自动滚动到可视区内。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值