Web development and Tech news Blog site. WEBISFREE.com
Let's learn about scrollIntoView(), one of the ways to scroll to a specific area on a website.
[Hold on] What are the methods to move the scroll to a specific element?
There are several ways to move the scroll to the desired position. Before we look at the above method, let's first learn about the old or existing methods.
1. How to add an id to a tag and use the # symbol in the URL.
; After adding an id value to the element, you can move directly to that location by using #(hash) symbol in the url. However, in order to move smoothly, you need to use CSS additionally.
2. How to determine the scroll position of the element and move it to that position.
; This method is the most commonly used method before scrollIntoView(). It is a way to move to the desired scroll position of an element using the scrollTop() function.
3. Using libraries in other ways
; You can't miss jQuery's scrollTop(). You can also use other libraries.
As mentioned above, we looked at a few existing methods, but lately, the scrollIntoView() method seems to be used frequently since it is compatible with most major browsers and provides several options. It is also beneficial from a compatibility standpoint and allows for smooth scrolling with the use of various options.
# How to use JavaScript's scrollIntoView() method.
Now let's look at how to use scrollIntoView() below. First, the simple syntax is as follows.
Element.scrollIntoView(Options)
The grammar is as shown above. It is utilized in two ways as a method for using options, as follows below.
* First method
Decide whether it will be positioned based on the top or start (left) side.
Element.scrollIntoView(true or false)
// Decide whether to position it based on the top of the element.
// Decide whether to position it based on the top of the element.
* Second method
The second method is to set the options in the form of an Object, rather than using the Boolean format of true/false. Each option behaves as follows. The options can be used as shown below.
* Available options
behavior // The method of animation for movement, auto, smooth (Default. auto)
block // The alignment position in the vertical direction of scrolling, start, center, end, nearest (Default. start)
inline // The alignment position in the horizontal direction of scrolling, start, center, end, nearest (Default. start)
It is possible to use it as an example as follows.
Element.scrollIntoView({ block: 'center'})
Element.scrollIntoView({ inline: 'nearest'})
Element.scrollIntoView({ inline: 'nearest'})
! Simple example of JavaScript scrollIntoView()
I am trying to create a simple example. In below, we created buttons Top and Top Smooth. When each button clicked, it moves to the top of each respective page.<button onclick="moveToTop()">Top</button>
<button onclick="moveToTopSmooth()">Top Smooth</button>
<script>
var moveToTop = function() {
document.body.scrollIntoView();
};
var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>
<button onclick="moveToTopSmooth()">Top Smooth</button>
<script>
var moveToTop = function() {
document.body.scrollIntoView();
};
var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>
When you click on Top Smooth, the difference is that it moves smoothly to the top. If you actually implement it, it will appear as shown below. Please try clicking it yourself.
* Below is the implementation of the actual example
<button onclick="moveToTop()">Top</button>
<button onclick="moveToTopSmooth()">Top Smooth</button>
<script>
var moveToTop = function() {
document.body.scrollIntoView();
};
var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>
<button onclick="moveToTopSmooth()">Top Smooth</button>
<script>
var moveToTop = function() {
document.body.scrollIntoView();
};
var moveToTopSmooth = function() {
document.body.scrollIntoView({ behavior: 'smooth' });
};
</script>
Please click and try the test.
We have learned about scrollIntoView(), which is one of the ways to scroll to a certain point.
Perhaps you're looking for the following text as well?