Home > Article > Web Front-end > How to achieve smooth scrolling navigation of web pages through CSS

How to achieve smooth scrolling navigation of web pages through CSS

PHPzOriginal: 2023-10-19 10:40:59704browse

Navigation is a very important part of web pages and is the entrance for users to browse web content. In a long web page, smooth scrolling navigation allows users to quickly locate the required content and improves the user experience.

To achieve smooth scrolling navigation through CSS, you can use some CSS features and techniques. The following is a specific code example:

HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>平滑滚动导航</title>
  <link rel="stylesheet" type="text/css" href="style.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>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>内容...</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>内容...</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>内容...</p>
</section>

<section id="section4">
  <h2>Section 4</h2>
  <p>内容...</p>
</section>

</body>
</html>

CSS style (saved as a style.css file):

body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; /* 触发平滑滚动 */
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
}

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

nav ul li {
  margin: 0 10px;
}

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

section {
  height: 800px; /* 设置每个 section 的高度 */
  padding: 50px;
}

In the above code, we used scroll-behavior: smooth;To trigger smooth scrolling. This attribute can be applied to the body tag, and all scrolling operations on the page (including anchor jumps within the page) will be performed in a smooth manner.

In the navigation bar part, we set position: fixed; to fix the navigation at the top of the page. The ul and li elements in the navigation bar use flex layout and center the menu items. The navigation bar link is wrapped with a tag and has the color attribute set.

In the page content part, we have defined some section tags, and each section represents a content block. In order to demonstrate the effect, a fixed height and some styles are set for each section.

Run the above code, you will find that when you click the link in the navigation bar, the page will scroll smoothly to the corresponding section position.

Through the above CSS code example, we successfully implemented smooth scrolling navigation of the web page. This technique can improve the user's browsing experience and make it easier for users to browse page content. Of course, in specific projects, you can adjust and optimize the style as needed.

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

css html position flex ul li

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

See more

How to achieve smooth scrolling navigation of web pages through CSS

Related articles