Home > Article > Web Front-end > How to achieve smooth scrolling effect on web pages through pure CSS

How to achieve smooth scrolling effect on web pages through pure CSS

WBOYOriginal: 2023-10-19 10:27:12828browse

In web design, smooth scrolling effect can provide users with a good browsing experience and make page switching smoother . Achieving smooth scrolling effects in pure CSS can avoid using JavaScript, further optimizing page loading speed and performance. This article will introduce in detail how to use pure CSS to achieve the smooth scrolling effect of web pages, and provide specific code examples.

1. The basic principles of the scrolling effect
Before we begin, let’s first understand the basic principles of the scrolling effect. The smooth scrolling effect is mainly achieved through the CSS attributes transition and transform. Among them, transition is used to define the transition effect of the element, while transform is used to define the position and deformation of the element. By setting the transition attribute on the scroll target element, when a scrolling behavior occurs, a smooth scrolling effect is achieved by changing the transform attribute of the target element.

2. Create the basic structure
First, we need to create a basic HTML structure. Suppose the smooth scrolling effect we want to achieve is to click the navigation link and the page will scroll to the corresponding position. The infrastructure can contain a navigation bar and multiple page content blocks. Each link in the navigation bar corresponds to a page content block. When the link is clicked, the page will smoothly scroll to the corresponding content block.

HTML structure code example:

<!DOCTYPE html>
<html>
<head>
    <title>平滑滚动效果</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <nav>
        <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>
    </nav>

    <div id="section1" class="section">
        <h1>Section 1</h1>
    </div>

    <div id="section2" class="section">
        <h1>Section 2</h1>
    </div>

    <div id="section3" class="section">
        <h1>Section 3</h1>
    </div>

</body>
</html>

3. Use CSS to achieve smooth scrolling effect

First, we need to add a CSS style to each page content block. Make it have the same height, and set the overflow attribute to hidden to achieve a smooth scrolling effect when switching pages.

CSS code example:

.section {
    height: 100vh;
    overflow: hidden;
}

Next, we need to add a click event to the navigation link and achieve a smooth scrolling effect by setting the transform attribute of the scroll target element.

CSS code example:

nav ul li a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #f00;
}

nav ul li a:active {
    color: #00f;
}

nav ul li a:focus {
    color: #090;
}

section:target {
    transform: translateY(0);
}

Among them, the section:target selector is used to select the page content block corresponding to the clicked navigation link, and is implemented by setting the transform: translateY(0) attribute Smooth scrolling of the page.

4. Summary
Realizing the smooth scrolling effect of web pages through pure CSS can improve the user experience and avoid using JavaScript to further optimize page loading speed and performance. This article achieves this effect through the transition and transform properties of CSS and provides specific code examples. Hope this article is helpful to you.

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

JavaScript css html 事件选择器 overflow transform transition

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：CSS Layout Tutorial: The Best Way to Implement Holy Grail LayoutNext article：CSS Layout Tutorial: The Best Way to Implement Holy Grail Layout

See more

How to achieve smooth scrolling effect on web pages through pure CSS

Related articles