让页面更灵活，网页滚动锚点导航小demo，极致提升用户体验！

前端

2023-09-05 09:09:29

正文

前言

随着互联网的快速发展，网页的设计越来越注重用户体验。锚点导航是一种非常常见的网页交互设计，通过点击页面上的链接，可以快速地跳转到对应的页面位置。锚点导航不仅可以提高用户体验，还可以优化网站的 SEO 排名。

原理

锚点导航的原理很简单，就是通过在页面上设置锚点，然后通过链接跳转到对应的锚点。锚点可以是页面上的任意元素，比如标题、图片、按钮等。

实现

锚点导航可以通过 JavaScript 实现，也可以通过 CSS 实现。

JavaScript 实现

// 获取所有锚点
const anchors = document.querySelectorAll('a[href^="#"]');

// 循环所有锚点，添加点击事件
anchors.forEach(anchor => {
  anchor.addEventListener('click', (event) => {
    // 获取锚点的链接
    const href = event.target.getAttribute('href');

    // 获取锚点对应的元素
    const element = document.querySelector(href);

    // 滚动到锚点对应的元素
    element.scrollIntoView({ behavior: 'smooth' });
  });
});

CSS 实现

a[href^="#"] {
  text-decoration: none;
}

a[href^="#"]:hover {
  text-decoration: underline;
}

a[href^="#"]:active {
  color: #f00;
}

小 demo

以下是一个锚点导航的小 demo，供读者参考。

<!DOCTYPE html>
<html>
<head>
  
  <meta charset="UTF-8">
  <style>
    a[href^="#"] {
      text-decoration: none;
    }

    a[href^="#"]:hover {
      text-decoration: underline;
    }

    a[href^="#"]:active {
      color: #f00;
    }

    h1 {
      font-size: 36px;
    }

    h2 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>锚点导航小 demo</h1>

  <h2>目录</h2>

  <ul>
    <li><a href="#section1">section1</a></li>
    <li><a href="#section2">section2</a></li>
    <li><a href="#section3">section3</a></li>
  </ul>

  <hr>

  <section id="section1">
    <h2>section1</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod, ipsum ut tincidunt ultricies, massa massa tempor dui, eu posuere nulla nunc ac augue. Sed eget ligula eu odio bibendum lacinia. Nunc molestie, felis vitae viverra laoreet, est ipsum malesuada magna, sed aliquam mi eros sed augue. Aenean aliquet eget sem eget feugiat. Mauris ullamcorper, felis vitae egestas efficitur, mi risus venenatis lacus, et tincidunt arcu nibh in mauris.</p>
  </section>

  <section id="section2">
    <h2>section2</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod, ipsum ut tincidunt ultricies, massa massa tempor dui, eu posuere nulla nunc ac augue. Sed eget ligula eu odio bibendum lacinia. Nunc molestie, felis vitae viverra laoreet, est ipsum malesuada magna, sed aliquam mi eros sed augue. Aenean aliquet eget sem eget feugiat. Mauris ullamcorper, felis vitae egestas efficitur, mi risus venenatis lacus, et tincidunt arcu nibh in mauris.</p>
  </section>

  <section id="section3">
    <h2>section3</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod, ipsum ut tincidunt ultricies, massa massa tempor dui, eu posuere nulla nunc ac augue. Sed eget ligula eu odio bibendum lacinia. Nunc molestie, felis vitae viverra laoreet, est ipsum malesuada magna, sed aliquam mi eros sed augue. Aenean aliquet eget sem eget feugiat. Mauris ullamcorper, felis vitae egestas efficitur, mi risus venenatis lacus, et tincidunt arcu nibh in mauris.</p>
  </section>

  <script>
    // 获取所有锚点
    const anchors = document.querySelectorAll('a[href^="#"]');

    // 循环所有锚点，添加点击事件
    anchors.forEach(anchor => {
      anchor.addEventListener('click', (event) => {
        // 获取锚点的链接
        const href = event.target.getAttribute('href');

        // 获取锚点对应的元素
        const element = document.querySelector(href);

        // 滚动到锚点对应的元素
        element.scrollIntoView({ behavior: 'smooth' });
      });
    });
  </script>
</body>
</html>