时间戳

首页 > 解决方案 > How to add an animated scroll down button using Html/Css?

html - How to add an animated scroll down button using Html/Css?

问题描述

I'm trying to make a smooth scrolling program, and it works, but I want a kinda animated button to it.

Here's my code:

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 800px;
  background-color: red;
}

#section2 {
  height: 800px;
  background-color: blue;
}
<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h1>Section 1</h1>
  <a href="#section2">Section 2 </a>
</div>

<div class="main" id="section2">
  <h1>Section 2</h1>
  <a href="#section1">Section 1</a>
</div>

I want something like this -

The image

Is there any way to do this using only HTML and CSS?

标签： htmlcsscss-animations

解决方案

So first of all, I turned this:

<a href="#section2">Section 2 </a>

And turned it into this:

<div class="scrollButton">
   <p class="scrollIcon">></p>
   <a href="#section2">Section 2 </a>
</div>

Then I created the icon (it's a rotated > with transform: rotate(90deg);) and placed the text under it. Then I animated the button using CSS keyframes

You can also use a normal icon but don't forget to remove the transform: rotate(90deg);.

Here is the code:

<!DOCTYPE html>

<html>
    <head>
        <style>
            /* Styles needed */

            html {
                scroll-behavior: smooth;
            }
            
            a {
              color: #fff;
              text-decoration: none;
            }

            #section1 {
            height: 800px;
            background-color: red;
            }

            #section2 {
            height: 800px;
            background-color: blue;
            }
            
            .scrollButton {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;            
            }
            
            .scrollIcon {
              transform: rotate(90deg);
              display: inline-block;
              position: relative;
              animation: 2.5s scrollIcon infinite;
              color: #fff;
            }
            
            @keyframes scrollIcon {
              0% {
                opacity: 0;
                top: 0; 
              } 
              50% {
                opacity: 1;
              }
              100% {
                opacity: 0;
                top: 15px;
              }
            }
            
        </style>        
    </head>

    <body>
        <h1>Smooth Scroll</h1>

        <div class="main" id="section1">
          <h1>Section 1</h1>
          
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section2">Section 2 </a>
          </div>
          
        </div>
        
        <div class="main" id="section2">
          <h1>Section 2</h1> 
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section1">Section 2 </a>
          </div>
        </div>
    </body>
</html>

推荐阅读