Home > Article > Web Front-end > How to achieve smooth scrolling effect with CSS

How to achieve smooth scrolling effect with CSS

王林Original: 2023-11-21 13:13:421251browse

How to use CSS to achieve smooth scrolling effect

In web design and development, the scrolling effect is a very common and cool effect that can bring users Better experience. To achieve a smooth scrolling effect, you can achieve it through some CSS techniques. This article will introduce how to use CSS to achieve a smooth scrolling effect and provide specific code examples.

1. Use anchor points to achieve smooth scrolling of internal pages

The anchor point is a mark in HTML. You can define a certain position on the page as an anchor point, and pass the anchor point in the URL. point value for positioning. In smooth scrolling, you can smoothly scroll to the corresponding anchor position when clicking a navigation link.

HTML code example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平滑滚动示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }

    nav ul li {
      margin: 0 10px;
    }

    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }

    /* 内容样式 */
    #home {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    #about {
      height: 100vh;
      background-color: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    #contact {
      height: 100vh;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>

  <section id="home">
    <h1>欢迎来到首页</h1>
    <p>这是一个平滑滚动示例</p>
  </section>

  <section id="about">
    <h1>关于我们</h1>
    <p>这是关于我们的内容</p>
  </section>

  <section id="contact">
    <h1>联系我们</h1>
    <p>这是联系我们的内容</p>
  </section>
</body>
</html>

In the above code, add anchor value to the navigation link, such as <a href="#home">Homepage</a>&gt ;, when a navigation link is clicked, the page will smoothly scroll to the corresponding anchor position. This is because the browser's default behavior for anchor links is to scroll smoothly to the anchor location.

2. Use the scrolling behavior attribute of CSS

The scrolling behavior attribute (scroll-behavior) of CSS is a new feature in the CSS scrolling module, which can control the behavior of scrolling. By setting this property to smooth, you can achieve a smooth transition effect when the page is scrolled.

CSS code example:

html {
  scroll-behavior: smooth;
}

The above code will be applied to the entire document, making the scrolling behavior throughout the document smooth. However, it should be noted that this attribute only takes effect in browsers that support this feature. For browsers that do not support this feature, the scrolling behavior is still the default.

3. Use the transform attribute to achieve smooth scrolling

In addition to using anchor points and scrolling behavior attributes, we can also use the CSS transform attribute to achieve a smooth scrolling effect. By using the translateY function of the transform attribute, we can achieve smooth scrolling in the vertical direction.

HTML and CSS code examples:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平滑滚动示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }

    nav ul li {
      margin: 0 10px;
    }

    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }

    /* 内容样式 */
    .container {
      height: 100vh;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }

    .section {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>

  <div class="container">
    <div id="home" class="section">
      <h1>欢迎来到首页</h1>
      <p>这是一个平滑滚动示例</p>
    </div>

    <div id="about" class="section">
      <h1>关于我们</h1>
      <p>这是关于我们的内容</p>
    </div>

    <div id="contact" class="section">
      <h1>联系我们</h1>
      <p>这是联系我们的内容</p>
    </div>
  </div>

  <script>
    var links = document.querySelectorAll('nav ul li a');
    var sections = document.querySelectorAll('.section');

    links.forEach(function(link) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        var href = this.getAttribute('href');
        var offsetTop = document.querySelector(href).offsetTop;

        scroll({
          top: offsetTop,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>

In the above code, we added a click event to the navigation link, and obtained the offsetTop of the corresponding anchor element by obtaining the href attribute value of the clicked link. value and pass this value to the scroll function to achieve a smooth scrolling effect.

4. Summary

This article introduces three methods of using CSS to achieve smooth scrolling effects, namely using anchor points, scrolling behavior attributes and transform attributes. By rationally using these methods, you can add elegant and smooth scrolling effects to web pages and improve user experience. Using these methods requires selection based on actual needs and compatibility considerations, and adding relevant JS code appropriately to implement the functionality. I hope the content of this article can be helpful to you.

The above is the detailed content of How to achieve smooth scrolling effect with CSS. For more information, please follow other related articles on the PHP Chinese website!

css html 值传递 JS 事件 href transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use CSS to achieve image rotation effectNext article：How to use CSS to achieve image rotation effect

See more

How to achieve smooth scrolling effect with CSS

Related articles