Smooth scrolling is a popular scrolling behavior in most of the one page websites like landing pages. In this article I am gonna show you 4 different ways to create this effect. One way using only CSS, while the others using javascript.
4 different ways to make smooth scrolling:
- CSS scroll-behavior.
- window.scrollTo().
- window.scroll().
- element.scrollIntoView().
1. CSS scroll-behavior
By adding html {scroll-behavior: smooth;} to the CSS code this will affect the scroll behavior of the whole page.
See the Pen CSS scroll-behavior by Islam Sayed (@islam-codehood) on CodePen.
Browser Support
https://caniuse.com/css-scroll-behavior
2. window.scrollTo()
This is a window built-in method. This means that it is called on the window object. It can take an object as an argument.
Syntax
window.scrollTo({
top: <element top position on page>,
behavior: "smooth"
})
where the top property is a number that represents the number of pixels along the Y axis to scroll the window.
See the Pen window.scrollTo() by Islam Sayed (@islam-codehood) on CodePen.
Browser Support
https://caniuse.com/element-scroll-methods
3. window.scroll()
It is the same like scrollTo() method.
See the Pen window.scroll() by Islam Sayed (@islam-codehood) on CodePen.
Browser Support
https://caniuse.com/element-scroll-methods
4. element.scrollIntoView()
This one is a method of the Element object. This means that it should be called on the element itself.
Syntax
element.scrollIntoView({
behavior: "smooth",
block: "center"
})where the block property is the vertical alignment of the element. It can be either start, center, end, or nearest. Default value is start.
See the Pen elem.scrollIntoView() by Islam Sayed (@islam-codehood) on CodePen.
