JavaScript scrollIntoView
last modified April 2, 2025
In this article, we explore the element.scrollIntoView method in
JavaScript. This method is essential for creating smooth scrolling effects and
navigating to specific elements on a webpage.
Basic Definition
The scrollIntoView method scrolls the element's parent container
so the element becomes visible to the user. It's commonly used for navigation,
form validation, and creating smooth scrolling effects.
This method accepts an optional parameter that can control the alignment and smoothness of the scroll. By default, it aligns the element to the top of the visible area and performs an instant scroll.
Basic scrollIntoView
This example demonstrates the simplest way to use scrollIntoView to scroll to an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic scrollIntoView</title>
<style>
#target {
margin-top: 1000px;
background: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="scrollToElement()">Scroll to Element</button>
<div id="target">Target Element</div>
<script>
function scrollToElement() {
const element = document.getElementById('target');
element.scrollIntoView();
}
</script>
</body>
</html>
In this basic example, we have a button and a target element positioned far down the page. When the button is clicked, the target element is scrolled into view.
The default behavior aligns the element to the top of the viewport. This is the simplest way to implement scrolling to a specific element on a page.
Smooth Scrolling
This example shows how to enable smooth scrolling behavior with scrollIntoView.
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<style>
#smoothTarget {
margin-top: 1500px;
background: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="smoothScroll()">Smooth Scroll</button>
<div id="smoothTarget">Smooth Target</div>
<script>
function smoothScroll() {
const element = document.getElementById('smoothTarget');
element.scrollIntoView({ behavior: 'smooth' });
}
</script>
</body>
</html>
Here we use the options parameter with behavior: 'smooth' to create
a smooth scrolling animation. This provides a more pleasant user experience.
The smooth behavior is supported in most modern browsers. For older browsers, you might need to use a polyfill or alternative scrolling solution.
Alignment Options
This example demonstrates how to control the alignment of the scrolled element.
<!DOCTYPE html>
<html>
<head>
<title>Alignment Options</title>
<style>
.box {
height: 200px;
margin: 1000px 0;
padding: 20px;
}
#top { background: #ffcccc; }
#center { background: #ccffcc; }
#bottom { background: #ccccff; }
</style>
</head>
<body>
<button onclick="scrollToTop()">Align Top</button>
<button onclick="scrollToCenter()">Align Center</button>
<button onclick="scrollToBottom()">Align Bottom</button>
<div id="top" class="box">Top Aligned</div>
<div id="center" class="box">Center Aligned</div>
<div id="bottom" class="box">Bottom Aligned</div>
<script>
function scrollToTop() {
document.getElementById('top').scrollIntoView({ block: 'start' });
}
function scrollToCenter() {
document.getElementById('center').scrollIntoView({ block: 'center' });
}
function scrollToBottom() {
document.getElementById('bottom').scrollIntoView({ block: 'end' });
}
</script>
</body>
</html>
This example shows three different alignment options: start (top), center, and end (bottom) of the viewport. Each button demonstrates a different alignment.
The block option controls the vertical alignment, while the
inline option (not shown) would control horizontal alignment.
Form Validation Scroll
This example shows a practical use case of scrollIntoView in form validation.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Scroll</title>
<style>
form {
margin-bottom: 1500px;
}
.error {
color: red;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()">
<h2>Registration Form</h2>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
<span id="nameError" class="error"></span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email">
<span id="emailError" class="error"></span>
</div>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
const name = document.getElementById('name');
const email = document.getElementById('email');
let isValid = true;
if (name.value.trim() === '') {
document.getElementById('nameError').textContent = 'Name is required';
name.focus();
name.scrollIntoView({ behavior: 'smooth', block: 'center' });
isValid = false;
}
if (email.value.trim() === '') {
document.getElementById('emailError').textContent = 'Email is required';
if (isValid) {
email.focus();
email.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
isValid = false;
}
return isValid;
}
</script>
</body>
</html>
In this form validation example, scrollIntoView is used to scroll to the first invalid field when validation fails. This improves user experience by showing where corrections are needed.
We combine focus() with scrollIntoView() to both scroll
to and focus the problematic input field. The smooth behavior makes the scroll
more pleasant.
Navigation Menu
This example demonstrates using scrollIntoView to create a single-page navigation.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
nav {
position: fixed;
top: 0;
width: 100%;
background: white;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav a {
margin: 0 10px;
cursor: pointer;
}
section {
height: 800px;
padding: 60px 20px 20px;
}
#home { background: #f0f0f0; }
#about { background: #e0e0e0; }
#services { background: #d0d0d0; }
#contact { background: #c0c0c0; }
</style>
</head>
<body>
<nav>
<a onclick="scrollToSection('home')">Home</a>
<a onclick="scrollToSection('about')">About</a>
<a onclick="scrollToSection('services')">Services</a>
<a onclick="scrollToSection('contact')">Contact</a>
</nav>
<section id="home">
<h2>Home Section</h2>
</section>
<section id="about">
<h2>About Section</h2>
</section>
<section id="services">
<h2>Services Section</h2>
</section>
<section id="contact">
<h2>Contact Section</h2>
</section>
<script>
function scrollToSection(sectionId) {
document.getElementById(sectionId).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
</script>
</body>
</html>
This example creates a single-page navigation menu where clicking a link smoothly scrolls to the corresponding section. The navigation bar remains fixed at the top.
We use block: 'start' to align sections to the top of the viewport,
just below the fixed navigation. This creates a polished single-page navigation
experience.
Source
MDN scrollIntoView Documentation
In this article, we have explored the scrollIntoView method with
various examples. This powerful method enables smooth scrolling and element
visibility control in modern web applications.
Author
List all JS DOM tutorials.