Add Smooth Scrolling to Your Website in 4 Lines of Code

December 28, 2024 (3mo ago)

_ # Add Smooth Scrolling to Your Website in 4 Lines of Code

Ever wanted to give your website that sleek, professional scrolling effect? With Locomotive Scroll, you can do it in just 4 lines of code. Let’s break it down:

Step 1: Set Up Your HTML First, include the Locomotive Scroll CSS in your HTML’s :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1/dist/locomotive-scroll.min.css" />

Next, wrap your content in a container with a special attribute:

<div data-scroll-container>
  <!-- Your website content goes here -->
</div>

Step 2: Add the JavaScript Just before your closing tag, include the Locomotive Scroll script:

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1/dist/locomotive-scroll.min.js"></script>

Step 3: The Magic 4 Lines Now, here’s where the magic happens. Add these 4 lines of JavaScript after the script include:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

That’s it! You’ve just added smooth scrolling to your website.

What These 4 Lines Do Create a new Locomotive Scroll instance Select the container we defined earlier Enable smooth scrolling Store the instance in a variable, useful for advanced features Customization Tips Add data-scroll attributes to elements for additional animation effects. Adjust smoothness by changing the smooth value (e.g., smooth: 0.5 for slower scrolling). Example Here’s a simple three-section website using this technique:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Smooth Scroll Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1/dist/locomotive-scroll.min.css" />
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .page {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
      #home,
      #about,
      #contact {
        background: url('https://images.unsplash.com/photo-1517379026834-d36e707f4d24?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3') center/cover;
      }
    </style>
  </head>
  <body>
    <div data-scroll-container>
      <section id="home" class="page">
        <h1>Welcome to Smooth Scroll</h1>
      </section>
      <section id="about" class="page">
        <h2>1st Section</h2>
      </section>
      <section id="contact" class="page">
        <h2>2nd Section</h2>
      </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1/dist/locomotive-scroll.min.js"></script>
    <script>
      const scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true
      });
    </script>
  </body>
</html>

Conclusion With just 4 lines of JavaScript, you’ve transformed your website’s scrolling experience. It’s that simple! Experiment with Locomotive Scroll’s options to further customize the effect and make your site stand out.

LinkedIn
X