How to use CSS to achieve smooth scrolling effect on web pages

How to use CSS to achieve smooth scrolling effect on web pages

In modern web design, achieving smooth scrolling effect can bring a better visual experience to users. Through some properties and techniques of CSS, we can easily achieve a smooth scrolling effect. This article will introduce how to use CSS to achieve smooth scrolling on web pages, with specific code examples.

1. Use the scroll-behavior attribute to achieve smooth scrolling

The scroll-behavior attribute of CSS3 can achieve a smooth scrolling effect. By setting it to "smooth", the scrolling action on the page becomes smooth and smooth.

Code example:

html {
scroll-behavior: smooth;
}

2. Add smooth scrolling to anchor links

In web pages, anchor links are often used to quickly jump to a certain location on the page. By adding a smooth scrolling effect to anchor links, you can make the page jump softer.

Code example:

a {
transition: all 0.3s ease-in-out;
}

a[href^="#"] {
scroll-behavior: smooth;
}

3. Use the transform attribute to achieve smooth scrolling

In addition to the scroll-behavior attribute, we can also use the transform attribute to achieve smoothness scroll. By changing the position of the page, you can achieve a smooth scrolling effect.

Code example:

html {
scroll-behavior: smooth;
}

body {
position: relative;
transition: transform 0.5s ease-in-out;
}

body.scroll {
transform: translateY(-100vh);
}

4. Use JavaScript to add dynamically Scroll effect

If the above CSS methods cannot meet the needs, we can also use some JavaScript libraries and frameworks to achieve customized scrolling effects, such as using the animate() method in jQuery.

Code example:

$('a[href^="#"]').on('click', function(e) {
e.preventDefault();

var target = $(this).attr('href');
$('html, body').animate({

scrollTop: $(target).offset().top

}, 800);
});

By adding a click event to the anchor link on the page, you can achieve the effect of smooth scrolling to the specified element.

Summary:

With some properties and techniques of CSS, we can easily achieve a smooth scrolling effect. Whether you use the scroll-behavior attribute, transform attribute, or combine JavaScript to achieve customized scrolling effects, you can bring users a better visual experience and smooth scrolling effect. No matter which method you choose, remember to use appropriate transition effects and animations to increase the interactivity and beauty of the page. Hope this article is helpful to you!

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