This JavaScript code provides smooth scrolling functionality to elements on a webpage. The code targets a navigation menu with links and applies event listeners to each link. When a link is clicked, it prevents the default behavior of immediately jumping to the target element and instead smoothly scrolls to the desired section on the page. The code also adds an “active” class to the clicked link and removes it from any previously active link.
The smooth scrolling effect is achieved by calculating the offset of the target element and using the window.scrollTo() method with the behavior option set to “smooth”. This code is helpful for enhancing user experience by providing a seamless scrolling effect and improving navigation within a webpage.
How to Smooth Scroll To Element using JavaScript
1. Let’s start by creating the HTML structure for our smooth scrolling navigation. Open your preferred code editor and create a new HTML file. Begin by setting up the basic HTML structure with a navigation menu and sections that you want to scroll to. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="nav">
<a href="#section1" class="active">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1</h2>
<!-- Content for Section 1 -->
</section>
<section id="section2">
<h2>Section 2</h2>
<!-- Content for Section 2 -->
</section>
<section id="section3">
<h2>Section 3</h2>
<!-- Content for Section 3 -->
</section>
<script src="script.js"></script>
</body>
</html>
2. Add some basic CSS styles to improve the appearance of our page and the navigation menu. Create a new file called “styles.css” and link it to your HTML file using the <link> tag in the <head> section. Here’s a sample CSS code snippet:
html, body {
font-family: "Arial", sans-serif;
background: #f4f4f4;
padding: 80px 30px 30px;
color: #333;
height: 100%;
}
ol, ul {
margin: 0 0 30px 0;
}
h1 {
font-weight: bold;
color: #333;
}
p {
line-height: 1.6em;
margin-bottom: 15px;
font-size: 16px;
padding: 0;
}
p:last-child {
margin-bottom: 30px;
}
a {
font-weight: bold;
color: #ff5a8f;
text-decoration: none;
transition: color 200ms;
}
a:hover, a:focus {
color: #333;
}
section {
min-height: 50vh;
margin-bottom: 40px;
}
section .margin {
margin-bottom: 80vh;
}
nav {
display: flex;
width: 100%;
top: 0;
left: 0;
background: #303947;
position: fixed;
padding: 20px 30px;
}
nav a {
display: inline-flex;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
nav a:hover, nav a:focus {
color: white;
}
nav a.active {
color: #76c276;
}
3. Finally, add the JavaScript code that enables smooth scrolling to our elements. Create a new file called “script.js” and link it to your HTML file using the <script> tag at the end of the <body> section. Here’s the JavaScript code:
function smoothScroll() {
var links = document.querySelectorAll('.nav a');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var activeLink = document.querySelector('.active');
if (activeLink) {
activeLink.classList.remove('active');
}
this.classList.add('active');
var target = this.getAttribute('href');
var offset = document.querySelector(target).offsetTop - 160;
window.scrollTo({
top: offset,
behavior: 'smooth'
});
});
});
}
smoothScroll() ;
That’s all! hopefully, you have successfully created a smooth scroll to element functionality using JavaScript. If you have any questions or suggestions, feel free to comment below.
