JavaScript Smooth Scroll To Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript smooth scroll to element, firstly we understand the concept of scroll.
Scroll is to examine different portions of displayed text or pictures on a screen, move the object you are moving in that direction. Now move to the smooth scroll to element in javascript.
Step By Step Guide On JavaScript Smooth Scroll To Element :-
Javascript's scrollIntoView() method can be used to scroll to an element. The scrollIntoViewOptions option can be used to adjust the alignment and enable smooth motion.
The element's scrollable parent is taken into consideration when using the scrollIntoView function to scroll.
Typically, this refers to the browser window. Still, scrolling occurs with regard to the parent and not the browser window when the component is embedded within another scrollable element (element holding a scrollbar).
Relating the scrollIntoViewOptions Parameter to Customize Scroll Behavior and Alignment
The scrollIntoView technique similarly accepts a parameter through which you can configure the alignment of the vitality scroll behavior.
The object with the following properties is this parameter's scrollIntoViewOptions:
behaviour:-
This controls whether the element should scroll in an animated or instantaneous manner. smooth
- smooth: These are some possible values for it:
- auto: Does a smooth scrolling automatic: immediate scrolling This is the preset option.
block :-
This establishes the visible element's vertical alignment with relation to the scrollable parent. These are some possible values for it:
- start: The element is positioned above its scrollable parent. This is the preset option.
- Center: The element is centred within its scrollable parent.
- end: The element is positioned below its scrollable parent.
- nearest: This places the element in the optimal alignment for the circumstance. The component will be placed at the underside of the scrollable parent if the user is presently above it.It will be positioned at the top if the user is currently beneath the element. nobody will be if it's formerly in view.
inline :-
This establishes the visible element's horizontal alignment with regard to the scrollable parent. These are some possible values for it:
- start: The element is positioned to the left of its scrollable parent.
- center: The element is centred within its scrollable parent.
- end:Towards the end of the scrollable element, there is an element situated to the right.
- nearest: adjusts the component to the portions at side. The element will be placed to the left wing of the scrollable parent if the user is presently on the right side of it. The element will be introduced to the right if the user is presently on the left side of it. However, nothing happens, If previously in perspective. This is the preset option.
<html>
<head>
<title>
Talkerscode javascript smooth scroll to element.
</title>
<style>
.scroll {
height: 1000px;
}
</style>
</head>
<body>
<h1>
Welcome to Talkerscode
</h1>
<p class="scroll">
Javascript smooth scroll to element
</p>
<script>
let anchorSelector = 'a[href^="#"]';
let anchorList =
document.querySelectorAll(anchorSelector);
anchorList.forEach(link => {
link.onclick = function (e) {
e.preventDefault();
let destination =
document.querySelector(this.hash);
destination.scrollIntoView({
behavior: 'smooth'
});
}
});
</script>
</body>
</html>
- To begin, we use HTML, HEAD, and TITLE to organise our code.
- Next, we begin styling, setting the scroll's height to 1000 pixels.
- Following that, we begin our body and include the title Welcome to Talkerscode.
- Next, we employ the p class and supply the scroll value.
- We then begin the script.
- Next, create a selector for hash-based anchor link selection.
- After that, we gather all anchor connections.
- Next, using the onclick function, we iterate through each of the links.
- If the hash value is empty, it will then prevent scrolling.
- Next, use the hash property to get the location to scroll to.
- Next, to scroll to the desired location, we use the scrollIntoView function.
Conclusion :-
As a result, we have successfully learned about the smooth scroll to element in javascript.
We have also discovered that accessibility is an issue with the technology used for smooth scrolling.
For instance, if you click a #hash link, the browser will automatically switch its focus to the element that matches that ID.
Although the page may scroll, the scrolling is really a by product of the emphasis shifting.
I hope this article on JavaScript smooth scroll to element helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
