📌  相关文章
📜  css menu Ankerpoints 平滑滚动 - Html (1)

📅  最后修改于: 2023-12-03 15:30:08.577000             🧑  作者: Mango

CSS Menu Anchorpoints 平滑滚动 - HTML

在 HTML 页面中，当你点击菜单中的链接时，页面会跳转到锚点所在位置。但是，这种跳转方式会出现页面跳动的情况，同时用户体验也不太好。为了解决这个问题，我们可以使用 CSS 实现平滑滚动效果。

实现思路

实现平滑滚动的方法是将锚点链接的默认行为阻止，然后通过 JavaScript 的方式实现滚动效果。下面是一个简单的代码：

<ul>
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3.</p>
</div>

上面的代码中，通过 href 属性指定了每个菜单项要跳转到的锚点位置，锚点的位置由 id 属性指定。下面是对应的 JavaScript 代码：

$(document).ready(function() {
  // 平滑滚动到锚点位置
  $('a[href^="#"]').click(function() {
    var target = $(this.hash);
    if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
    if (target.length == 0) target = $('html');
    $('html, body').animate({ scrollTop: target.offset().top }, 1000);
    return false;
  });
});

上面代码中，通过 jQuery 实现了 click 事件的绑定。当你点击菜单中的链接时，jQuery 将自动识别出要跳转到的锚点位置。在这个例子中，代码会滚动到页面中带有对应 id 的元素位置。

示例

为了更好地理解上面的代码，下面是一个完整的示例。你可以把代码复制到你的本地 HTML 文件中运行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Menu Anchorpoints Smooth Scrolling</title>
  <style>
    header {
      height: 150px;
      background-color: #333;
      color: #fff;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover:not(.active) {
      background-color: #111;
    }

    .active {
      background-color: #4CAF50;
    }

    #section1, #section2, #section3 {
      height: 500px;
      padding: 50px;
      text-align: center;
    }

    #section1 {
      background-color: red;
    }

    #section2 {
      background-color: green;
    }

    #section3 {
      background-color: blue;
    }
  </style>
</head>
<body>

<header>
  <h1>Header</h1>
</header>

<ul>
  <li><a class="active" href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3.</p>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function() {
    // 平滑滚动到锚点位置
    $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
      if (target.length == 0) target = $('html');
      $('html, body').animate({ scrollTop: target.offset().top }, 1000);
      return false;
    });
  });
</script>

</body>
</html>
总结

CSS Menu Anchorpoints 平滑滚动可以提高用户体验，避免了页面跳动的情况。通过无需太多的代码，就可实现平滑滚动的效果。这个技术在各种类型的网站中，都可以使用。