jQuery는 간단한 스크롤 애니메이션을 구현합니다.
- WBOY원래의
- 2016-05-16 15:06:211788검색
애니메이션 아이디어는 매우 간단합니다. 페이지의 요소를 클릭하면 페이지가 지정된 위치로 스크롤됩니다. 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，结果就是回到页面顶端。
});
...
});
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.