jQuery는 간단한 스크롤 애니메이션을 구현합니다.-JS 튜토리얼-php.cn

jQuery는 간단한 스크롤 애니메이션을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:06:21

원래의

1790명이 탐색했습니다.

애니메이션 아이디어는 매우 간단합니다. 페이지의 요소를 클릭하면 페이지가 지정된 위치로 스크롤됩니다. Baidu에서 3시간 동안 조사한 결과를 소개합니다.

첫 번째는 html 부분입니다.

<html>
<body>
<a>顶部</a>
<a>中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>

로그인 후 복사

먼저 두 개의 요소를 버튼으로 추가합니다. 그런 다음 요소를 추가합니다.

<html>
<body>
<a href="javascript:;" id="tab1">顶部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>

로그인 후 복사

href="javascript:;"는 아마도 a 요소가 js 코드를 활성화할 수 있음을 의미할 것입니다. 추가하지 않으면 코드가 유효하지 않습니다. <버튼>을 사용할 때 추가할 필요가 없습니다.
그런 다음 jquery를 소개하고 코드를 작성합니다.

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function(){
    $("#tab1").click(function(){
      $("html,body").animate({scrollTop:'0px'},300);
    });
    $("#tab2").click(function(){
      $("html,body").animate({scrollTop:'600px'},300);
    });
  });
</script>

로그인 후 복사

참고:

1. 소개된 jquery 문 아래에 코드를 작성하는 것이 가장 좋습니다

2. ID는 요소와 일치해야 합니다.

3. "html,body"는 전체적인 움직임을 나타냅니다

4. ({scrollTop:'600px'},300); 이전 값은 이동 거리이고, 다음 값은 애니메이션 시간입니다(단위는 밀리초)

이 단계가 끝나면 코드가 실행됩니다.

jquery 코드를 자세히 분석하면 다음과 같습니다.

 $(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用


    $("#tab1").click(function(){
    //$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法


      $("html,body").animate({scrollTop:'0px'},300);
      //我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。


    });
    ...
  });

로그인 후 복사

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.