그럼에도 불구하고

👨‍💻

[Visual Studio Code] scroll-behavior: smooth 본문

HTML, CSS/Function implementation

[Visual Studio Code] scroll-behavior: smooth

zenghyun 2022. 10. 29. 10:37

a태그를 사용하여 html내에서 이동하다 보면 

 

뚝뚝 끊기는 것과 같은 이동을 보인다. 

 

이럴 때 scroll-behavior: smooth;를 사용하면

 

부드럽게 이동할 수 있다.

 

 

사용 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bookmark</title>
    <link rel="stylesheet" href="../style/reset.css">
    <style>
        html{scroll-behavior: smooth;}
        .content { height: 500px;}
        .content1{ background-color: darkcyan;}
        .content2{ background-color: yellowgreen;}
         .content3{ background-color: darkcyan;}
         .content4{ background-color: yellowgreen;}
        </style>
</head>
<body>
    <!-- #을 이용하여 페이지 내에서 상하를 이동하는 효과 -->
    <a href="#content1">1Lorem</a>
    <a href="#content2">2Lorem</a>
    <a href="#content3">3Lorem</a>
    <a href="#content4">4Lorem</a>
   

    <div class="content content1" id="content1">1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem.
        <!-- 그냥 #만 붙이면 제일 위로 감 -->
        <br><a href="#">맨위로 가기</a>
    </div>
    <div class="content content2" id="content2">2Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio earum expedita perferendis dolor consectetur eligendi fugiat repellendus excepturi reprehenderit nisi, numquam provident quasi, quia ea nobis illo atque nulla alias.
        <br><a href="#">맨위로 가기</a>

    </div>
    <div class="content content3" id="content3">3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nihil adipisci tempore at possimus unde veritatis voluptatem delectus nulla ipsa! Animi illum debitis porro inventore qui adipisci aperiam rerum labore?
        <br><a href="#">맨위로 가기</a>

    </div>
    <div class="content content4" id="content4">4Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam distinctio et facere tempore iure quo quam vitae eaque unde amet molestiae dolorem explicabo aut debitis, sequi veniam obcaecati a voluptate.
        <br><a href="#">맨위로 가기</a>

    </div>
</body>
</html>

결과

 

bookmark 1Lorem 2Lorem 3Lorem 4Lorem
1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem.
맨위로 가기
2Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio earum expedita perferendis dolor consectetur eligendi fugiat repellendus excepturi reprehenderit nisi, numquam provident quasi, quia ea nobis illo atque nulla alias.
맨위로 가기
3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nihil adipisci tempore at possimus unde veritatis voluptatem delectus nulla ipsa! Animi illum debitis porro inventore qui adipisci aperiam rerum labore?
맨위로 가기
4Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam distinctio et facere tempore iure quo quam vitae eaque unde amet molestiae dolorem explicabo aut debitis, sequi veniam obcaecati a voluptate.
맨위로 가기

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] flex-direction  (0) 2022.11.01
[Visual Studio Code] justify-content  (0) 2022.11.01
[Visual Studio Code] overflow 사용하기  (0) 2022.10.29
[Visual Studio Code] css 사용하기 / nth-child / nth-of-type  (0) 2022.10.23
[Visual Studio Code] ol/ul/dl 태그 사용하기  (0) 2022.10.23
'HTML, CSS/Function implementation' Related Articles more
Comments