Navigation within a long webpage is essential for improving user experience. With a little help from HTML, CSS, and JavaScript, you can create a button that smoothly scrolls to a particular section of your page. In this blog post, we’ll guide you through building a simple “Jump to Section” feature with smooth scrolling functionality.
Overview of the Feature
Here’s what the functionality will look like:
- The page has multiple sections, each with a distinct color and labeled from Section 1 to Section 5.
- A “Go to Section 4” button is fixed at the top of the page.
- When you click the button, the page smoothly scrolls to Section 4.
Video Tutorial:
Overview of the Feature
Here’s what the functionality will look like:
- The page has multiple sections, each with a distinct color and labeled from Section 1 to Section 5.
- A “Go to Section 4” button is fixed at the top of the page.
- When you click the button, the page smoothly scrolls to Section 4.
The Code:
1. HTML Structure
The HTML is divided into:
- A fixed button (
<button>) for navigation. - Five distinct sections, each represented by
<section>elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Jump to Section</title> </head> <body> <!-- Button to jump --> <button id="jumpToSection4">Go to Section 4</button> <!-- Sections --> <section id="section1">Section 1</section> <section id="section2">Section 2</section> <section id="section3">Section 3</section> <section id="section4">Section 4</section> <section id="section5">Section 5</section> </body> </html>2. Adding Style with CSS
Each section has its own unique color, and the button is styled for visibility. Here’s the CSS
body { font-family: Arial, sans-serif; margin: 0; padding: 0; } section { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; } #section1 { background-color: #16c47f; } #section2 { background-color: #ffd65a; } #section3 { background-color: #ff9d23; } #section4 { background-color: #fc6e61; } #section5 { background-color: #fe1601; } button { position: fixed; top: 20px; left: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; }3. Adding Smooth Scrolling with JavaScript
The JavaScript ensures the page scrolls smoothly to Section 4 when the button is clicked:
document .getElementById("jumpToSection4") .addEventListener("click", function () { const section4 = document.getElementById("section4"); section4.scrollIntoView({ behavior: "smooth", block: "start" }); });Explanation of the Code
HTML: Structuring the Sections
- Each
<section>element represents a full-page view of content. - The button
<button>is assigned an ID (jumpToSection4) to easily attach an event listener.
CSS: Styling the Sections and Button
- The sections are given different background colors for easy identification.
height: 100vhensures each section takes up the full viewport height.- The button is fixed at the top-left corner, making it always visible.
JavaScript: Smooth Scrolling
- The
scrollIntoViewmethod triggers the scrolling animation. - The
behavior: "smooth"property makes the scroll transition smoother rather than an abrupt jump.
How It Works
- When the button is clicked, the event listener detects the click.
- The script identifies the target section (Section 4 in this case) using its ID (
section4). - The browser scrolls smoothly to the section.
Result
Once implemented, the feature creates an interactive and visually appealing scrolling experience for users. The button allows quick access to a specific section, which is particularly useful for long web pages or landing pages
- A fixed button (
