집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 간단한 스크롤 애니메이션을 구현합니다.

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

WBOY원래의: 2016-05-16 15:06:211840검색

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

첫 번째는 html 부분입니다.

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

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

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

href="javascript:;"는 아마도 a 요소가 js 코드를 활성화할 수 있음을 의미할 것입니다. 추가하지 않으면 코드가 유효하지 않습니다. b367242f19a18128711072e7b7cdbd4c을 사용할 때 추가할 필요가 없습니다.
그런 다음 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는 3499910bf9dac5ae3c52d5ede7383485 요소와 일치해야 합니다.

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，结果就是回到页面顶端。


    });
    ...
  });

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

성명：

이전 기사：JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)다음 기사：JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)

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

관련 기사