JavaScript element.scrollIntoView() Method
You are Here:
JavaScript element.scrollIntoView() Method
The element.scrollIntoView() method scrolls the screen to a target element.
Note: The element may not be scrolled completely to the top or bottom depending on the layout of other elements.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<div id="outerDiv">
<div id="innerDiv">
content inside innerDiv.
</div>
</div>
<p>Click on the button to the top of the innerDiv</p>
<button onclick="myFunction()">Click Me</button>
<script>
var elem = document.getElementById("innerDiv");
function myFunction() {
elem.scrollIntoView();
}
</script>
</body>
</html>
Syntax
element.scrollIntoView(alignTo)
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| alignTo | Optional | A boolean value that indicates the type of the align. If true - the top of the element will be aligned to the top of the visible area of the scrollable ancestor. If false - the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. |
element.scrollIntoView() with alignTo
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<div id="outerDiv">
<div id="innerDiv">
<div style="position:absolute;top:0;">Header is Here</div>
<div style="position:absolute;bottom:0">Footer is Here</div>
</div>
</div>
<p>Click on the button to do any of the following</p>
<button onclick="myContentTop()">Content Top</button>
<button onclick="myContentBottom()">Content Bottom</button>
<script>
var elem = document.getElementById("innerDiv");
function myContentTop(){
elem.scrollIntoView(true);
}
function myContentBottom(){
elem.scrollIntoView(false);
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
