如何在HTML中应用Vanilla JS滚动动画代码实现滚动效果？

Let’s walk through exactly how to get this smooth scroll code working in your HTML project—super straightforward once you see the full setup!

Step 1: Build Your Basic HTML Structure #

First, you need an HTML page with two key components:

• A button (since the code targets the first <button> element on the page)
• Enough content to make the page scrollable (otherwise you won’t see the animation effect)

Here’s a simple, ready-to-use example structure:

<!DOCTYPE html>
<html>
<head>
    <title>Smooth Scroll Demo</title>
    <style>
        /* Add styling to make the page long enough for scrolling */
        .content-block {
            height: 1000px;
            padding: 2rem;
            background-color: #f5f5f5;
            margin-bottom: 2rem;
        }
        button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #2563eb;
            color: white;
        }
    </style>
</head>
<body>
    <div class="content-block">
        <h1>Top of the Page</h1>
        <p>Scroll down to test the smooth scroll button!</p>
    </div>
    <div class="content-block">
        <h2>Middle Section</h2>
    </div>
    <div class="content-block">
        <h2>Bottom Section</h2>
    </div>

    <button>Scroll to Top</button>

    <!-- We’ll insert the JavaScript here next -->
</body>
</html>

Step 2: Add the Smooth Scroll JavaScript #

Paste the provided JS code inside a <script> tag right before the closing </body> tag (this ensures all HTML elements load before the script runs, so it can find the button correctly):

<script>
document.getElementsByTagName('button')[0].onclick = function () { 
    scrollTo(document.body, 0, 1250); 
} 

function scrollTo(element, to, duration) { 
    var start = element.scrollTop, 
        change = to - start, 
        currentTime = 0, 
        increment = 20; 

    var animateScroll = function(){ 
        currentTime += increment; 
        var val = Math.easeInOutQuad(currentTime, start, change, duration); 
        element.scrollTop = val; 
        if(currentTime < duration) { 
            setTimeout(animateScroll, increment); 
        } 
    }; 
    animateScroll(); 
} 

// Easing function for smooth acceleration/deceleration
// t = current time, b = start value, c = change in value, d = duration
Math.easeInOutQuad = function (t, b, c, d) { 
    t /= d/2; 
    if (t < 1) return c/2*t*t + b; 
    t--; 
    return -c/2 * (t*(t-2) - 1) + b; 
};
</script>

Step 3: Run & Test the Code #

1. Save the entire code as an .html file (e.g., smooth-scroll-demo.html)
2. Double-click the file to open it in your web browser
3. Scroll down the page, then click the "Scroll to Top" button—you’ll see the page smoothly animate back to the top over 1.25 seconds (the 1250 value in the function call is the animation duration in milliseconds)

Bonus: Customize the Behavior #

• Scroll to a specific element instead of the top: Instead of scrolling to 0, get the top position of a target element and use that value. For example:

  // Add an element with id="target-section" in your HTML
  var target = document.getElementById('target-section');
  var targetPosition = target.offsetTop;
  scrollTo(document.body, targetPosition, 1250);
  

• Adjust animation speed: Change the 1250 value in the scrollTo call—smaller numbers make the scroll faster, larger numbers slower.
• Trigger scroll on other events: Replace the button click trigger with something else, like a link click or page load event.

内容的提问来源于stack exchange，提问作者Aldrin Espinosa