Breaking News: Grepper is joining You.com. Read the official announcement!

page scroll animation css codepen

Sivasubramaniyam V answered on July 12, 2023 Popularity 9/10 Helpfulness 2/10

answer page scroll animation css codepen

page scroll animation css codepen

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Smooth Page Scroll Animation</title>
  <style>
    /* Define the scroll container */
    html, body {
      height: 100%;
      overflow: auto;
    }
    
    /* Style for the scrollable content */
    .content {
      height: 2000px;
    }
    
    /* Style for the anchor links */
    .scroll-link {
      display: block;
      margin-bottom: 20px;
      color: #333;
      font-weight: bold;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    /* Add animation on hover */
    .scroll-link:hover {
      color: #f00;
    }
  </style>
</head>
<body>
  <div class="content">
    <a class="scroll-link" href="#section1">Go to Section 1</a>
    <a class="scroll-link" href="#section2">Go to Section 2</a>
    <a class="scroll-link" href="#section3">Go to Section 3</a>
    <!-- Add more anchor links as needed -->
    
    <section id="section1">
      <h2>Section 1</h2>
      <p>Content of section 1 goes here.</p>
    </section>
    
    <section id="section2">
      <h2>Section 2</h2>
      <p>Content of section 2 goes here.</p>
    </section>
    
    <section id="section3">
      <h2>Section 3</h2>
      <p>Content of section 3 goes here.</p>
    </section>
  </div>
  
  <script>
    // Smooth scroll animation on anchor link click
    document.querySelectorAll('.scroll-link').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: animation codepen css scroll

Link to this answer
Share Copy Link

Contributed on Jul 12 2023

Sivasubramaniyam V

0 Answers Avg Quality 2/10

page scroll animation css codepen

Contents

More Related Answers

page scroll animation css codepen

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.