jQuery를 사용하여 페이지를 부드럽게 스크롤하는 방법-JS 튜토리얼-php.cn

jQuery를 사용하여 페이지를 부드럽게 스크롤하는 방법

不言

풀어 주다： 2021-04-26 17:18:45

원래의

5515명이 탐색했습니다.

jQuery를 사용하여 페이지에서 부드러운 스크롤을 구현하는 방법: 먼저 해당 코드 파일을 연 다음 jQuery의 애니메이션 태그를 사용하여 부드러운 스크롤을 구현합니다.

jQuery를 사용하여 페이지를 부드럽게 스크롤하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 3.2.1, Dell G3 컴퓨터.

부드러운 스크롤은 페이지 내에서 스크롤하는 동작을 의미합니다. 웹 페이지에서 "맨 위로 돌아가기"와 같은 버튼을 자주 볼 수 있습니다. 이는 부드러운 스크롤을 사용하여 달성됩니다. 부드러운 스크롤을 구현하는 방법은 다음과 같습니다. jQuery를 사용하여.

부드러운 스크롤을 구현하는 방법

자바스크립트 코드는 다음과 같습니다

$(function(){
  $(&#39;a[href^="#"]&#39;).click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

로그인 후 복사

위 코드는 "speed"를 변경하여 스크롤 속도를 변경할 수 있습니다. 결국 우리는 URL에 영향을 주지 않으려고 노력합니다.

WordPress는 "$"와 충돌하므로 "$"를 "jQuery"로 변경하고, 아래에서는 jQuery의 애니메이션 태그를 사용하여 부드러운 스크롤을 구현합니다.

구체적인 예시를 살펴보겠습니다

코드는 다음과 같습니다

HTML code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function(){
        $(&#39;a[href^="#"]&#39;).click(function() {
          var speed = 400; 
          var href= $(this).attr("href");
          var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
          var position = target.offset().top;
          $(&#39;body,html&#39;).animate({scrollTop:position}, speed, &#39;swing&#39;);
          return false;
        });
      });
    </script>
    <title>jQuery</title>
  </head>
  <body>
    <h1 id="index">目录</h1>
    <ul>
      <li><a href="#1">sample1</a></li>
      <li><a href="#2">sample2</a></li>
      <li><a href="#3">sample3</a></li>
      <li><a href="#4">sample4</a></li>
    </ul>
    <div id="1">
      <h2>sample1</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="2">
      <h2>sample2</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="3">
      <h2>sample3</h2>
      <a class="button" href="#index">Topへ</a>
      </div>
    <div id="4">
      <h2>sample4</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
  </body>
</html>

로그인 후 복사

CSS code