menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

HTML锚点定位+平滑滚动

武飞扬头像
7780前端
帮助1人

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

  1. html-代码

  1.  
    <div class="content">
  2.  
    <h2 id="title1">标题一</h2>
  3.  
    <div class="placeholder"></div>
  4.  
    <h2 id="title2">标题二</h2>
  5.  
    <div class="placeholder"></div>
  6.  
    <h2 id="title3">标题三</h2>
  7.  
    <div class="placeholder"></div>
  8.  
    </div>
  9.  
    <!-- 目录 -->
  10.  
    <ul class="index">
  11.  
    <li><a href="#title1">标题一</a></li>
  12.  
    <li><a href="#title2">标题二</a></li>
  13.  
    <li><a href="#title3">标题三</a></li>
  14.  
    <li><a href="#" rel="internal">返回顶部</a></li>
  15.  
    </ul>
  16.  
    </div>
学新通

  1. css-代码

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

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

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="zh">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <title>书签链接</title>
  8.  
    </head>
  9.  
    <body>
  10.  
    <ol type="I">
  11.  
    <li>
  12.  
    <a href="#top100">100</a>
  13.  
    </li>
  14.  
    </ol>
  15.  
    <ul tyep="square">
  16.  
    <li><a name="top56">1</a></li>
  17.  
    <li><a name="top56">1</a></li>
  18.  
    <li><a name="top56">1</a></li>
  19.  
    <li><a name="top56">1</a></li>
  20.  
    <li><a name="top56">1</a></li>
  21.  
    <li><a name="top56">1</a></li>
  22.  
    <li><a name="top56">1</a></li>
  23.  
    <li><a name="top56">1</a></li>
  24.  
    <li><a name="top56">1</a></li>
  25.  
    <li><a name="top56">1</a></li>
  26.  
    <li><a name="top56">1</a></li>
  27.  
    <li><a name="top56">1</a></li>
  28.  
    <li><a name="top56">1</a></li>
  29.  
    <li><a name="top56">1</a></li>
  30.  
    <li><a name="top56">1</a></li>
  31.  
    <li><a name="top56">1</a></li>
  32.  
    <li><a name="top56">1</a></li>
  33.  
    <li><a name="top56">1</a></li>
  34.  
    <li><a name="top56">1</a></li>
  35.  
    <li><a name="top100">100</a></li>
  36.  
    <li><a name="top56">1</a></li>
  37.  
    <li><a name="top56">1</a></li>
  38.  
    <li><a name="top56">1</a></li>
  39.  
    <li><a name="top56">1</a></li>
  40.  
    <li><a name="top56">1</a></li>
  41.  
    <li><a name="top56">1</a></li>
  42.  
    <li><a name="top56">1</a></li>
  43.  
    <li><a name="top56">1</a></li>
  44.  
    <li><a name="top56">1</a></li>
  45.  
    <li><a name="top56">1</a></li>
  46.  
    <li><a name="top56">1</a></li>
  47.  
    <li><a name="top56">1</a></li>
  48.  
    <li><a name="top56">1</a></li>
  49.  
    <li><a name="top56">1</a></li>
  50.  
    <li><a name="top56">1</a></li>
  51.  
    <li><a name="top56">1</a></li>
  52.  
    <li><a name="top56">1</a></li>
  53.  
    <li><a name="top56">1</a></li>
  54.  
    <li><a name="top56">1</a></li>
  55.  
    <li><a name="top56">1</a></li>
  56.  
    <li><a name="top56">1</a></li>
  57.  
    <li><a name="top56">1</a></li>
  58.  
    <li><a name="top56">1</a></li>
  59.  
    <li><a name="top56">1</a></li>
  60.  
    <li><a name="top56">1</a></li>
  61.  
    <li><a name="top56">1</a></li>
  62.  
    <li><a name="top56">1</a></li>
  63.  
    <li><a name="top56">1</a></li>
  64.  
    <li><a name="top56">1</a></li>
  65.  
    <li><a name="top56">1</a></li>
  66.  
    <li><a name="top56">1</a></li>
  67.  
    <li><a name="top56">1</a></li>
  68.  
    <li><a name="top56">1</a></li>
  69.  
    <li><a name="top56">1</a></li>
  70.  
    <li><a name="top56">1</a></li>
  71.  
    <li><a name="top56">1</a></li>
  72.  
    <li><a name="top56">1</a></li>
  73.  
    <li><a name="top56">1</a></li>
  74.  
    <li><a name="top56">1</a></li>
  75.  
    <li><a name="top56">1</a></li>
  76.  
    <li><a name="top56">1</a></li>
  77.  
    <li><a name="top56">1</a></li>
  78.  
    <li><a name="top56">1</a></li>
  79.  
    <li><a name="top56">1</a></li>
  80.  
    <li><a name="top56">1</a></li>
  81.  
    <li><a name="top56">1</a></li>
  82.  
    <li><a name="top56">1</a></li>
  83.  
    <li><a name="top56">1</a></li>
  84.  
    <li><a name="top56">1</a></li>
  85.  
    <li><a name="top56">1</a></li>
  86.  
    <li><a name="top56">1</a></li>
  87.  
    <li><a name="top56">1</a></li>
  88.  
    <li><a name="top56">1</a></li>
  89.  
    <li><a name="top56">1</a></li>
  90.  
    <li><a name="top56">1</a></li>
  91.  
    <li><a name="top56">1</a></li>
  92.  
    <li><a name="top56">1</a></li>
  93.  
    <li><a name="top56">1</a></li>
  94.  
    <li><a name="top56">1</a></li>
  95.  
    <li><a name="top56">1</a></li>
  96.  
    </ul>
  97.  
    </body>
  98.  
    </html>
学新通

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

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

这是data1页面

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="zh">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <title>data_1</title>
  8.  
    </head>
  9.  
    <body>
  10.  
    <ol type="I">
  11.  
    <li>
  12.  
    <a href="data_2.html#top100">100</a>
  13.  
    </li>
  14.  
    </ol>
  15.  
    </body>
  16.  
    </html>
学新通

这是data2页面

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="zh">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  
    <title>data_2</title>
  8.  
    </head>
  9.  
    <body>
  10.  
    <ul tyep="square">
  11.  
    <li><a name="top56">1</a></li>
  12.  
    <li><a name="top56">1</a></li>
  13.  
    <li><a name="top56">1</a></li>
  14.  
    <li><a name="top56">1</a></li>
  15.  
    <li><a name="top56">1</a></li>
  16.  
    <li><a name="top56">1</a></li>
  17.  
    <li><a name="top56">1</a></li>
  18.  
    <li><a name="top56">1</a></li>
  19.  
    <li><a name="top56">1</a></li>
  20.  
    <li><a name="top56">1</a></li>
  21.  
    <li><a name="top56">1</a></li>
  22.  
    <li><a name="top56">1</a></li>
  23.  
    <li><a name="top56">1</a></li>
  24.  
    <li><a name="top56">1</a></li>
  25.  
    <li><a name="top56">1</a></li>
  26.  
    <li><a name="top56">1</a></li>
  27.  
    <li><a name="top56">1</a></li>
  28.  
    <li><a name="top56">1</a></li>
  29.  
    <li><a name="top56">1</a></li>
  30.  
    <li><a name="top100">100</a></li>
  31.  
    <li><a name="top56">1</a></li>
  32.  
    <li><a name="top56">1</a></li>
  33.  
    <li><a name="top56">1</a></li>
  34.  
    <li><a name="top56">1</a></li>
  35.  
    <li><a name="top56">1</a></li>
  36.  
    <li><a name="top56">1</a></li>
  37.  
    <li><a name="top56">1</a></li>
  38.  
    <li><a name="top56">1</a></li>
  39.  
    <li><a name="top56">1</a></li>
  40.  
    <li><a name="top56">1</a></li>
  41.  
    <li><a name="top56">1</a></li>
  42.  
    <li><a name="top56">1</a></li>
  43.  
    <li><a name="top56">1</a></li>
  44.  
    <li><a name="top56">1</a></li>
  45.  
    <li><a name="top56">1</a></li>
  46.  
    <li><a name="top56">1</a></li>
  47.  
    <li><a name="top56">1</a></li>
  48.  
    <li><a name="top56">1</a></li>
  49.  
    <li><a name="top56">1</a></li>
  50.  
    <li><a name="top56">1</a></li>
  51.  
    <li><a name="top56">1</a></li>
  52.  
    <li><a name="top56">1</a></li>
  53.  
    <li><a name="top56">1</a></li>
  54.  
    <li><a name="top56">1</a></li>
  55.  
    <li><a name="top56">1</a></li>
  56.  
    <li><a name="top56">1</a></li>
  57.  
    <li><a name="top56">1</a></li>
  58.  
    <li><a name="top56">1</a></li>
  59.  
    <li><a name="top56">1</a></li>
  60.  
    <li><a name="top56">1</a></li>
  61.  
    <li><a name="top56">1</a></li>
  62.  
    <li><a name="top56">1</a></li>
  63.  
    <li><a name="top56">1</a></li>
  64.  
    <li><a name="top56">1</a></li>
  65.  
    <li><a name="top56">1</a></li>
  66.  
    <li><a name="top56">1</a></li>
  67.  
    <li><a name="top56">1</a></li>
  68.  
    <li><a name="top56">1</a></li>
  69.  
    <li><a name="top56">1</a></li>
  70.  
    <li><a name="top56">1</a></li>
  71.  
    <li><a name="top56">1</a></li>
  72.  
    <li><a name="top56">1</a></li>
  73.  
    <li><a name="top56">1</a></li>
  74.  
    <li><a name="top56">1</a></li>
  75.  
    <li><a name="top56">1</a></li>
  76.  
    <li><a name="top56">1</a></li>
  77.  
    <li><a name="top56">1</a></li>
  78.  
    <li><a name="top56">1</a></li>
  79.  
    <li><a name="top56">1</a></li>
  80.  
    <li><a name="top56">1</a></li>
  81.  
    <li><a name="top56">1</a></li>
  82.  
    <li><a name="top56">1</a></li>
  83.  
    <li><a name="top56">1</a></li>
  84.  
    <li><a name="top56">1</a></li>
  85.  
    <li><a name="top56">1</a></li>
  86.  
    <li><a name="top56">1</a></li>
  87.  
    <li><a name="top56">1</a></li>
  88.  
    <li><a name="top56">1</a></li>
  89.  
    <li><a name="top56">1</a></li>
  90.  
    <li><a name="top56">1</a></li>
  91.  
    </ul>
  92.  
    </body>
  93.  
    </html>
学新通

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

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

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgfbfgf
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群