page_jquery 내 앵커 포인트의 부드러운 점프 효과를 얻기 위한 jQuery 방법 요약
- WBOY원래의
- 2016-05-16 15:59:561364검색
일반적으로 콘텐츠 탐색을 스크롤할 때 앵커 포인트를 통해 스크롤 효과 없이 콘텐츠로 직접 이동합니다. 또한 URL 링크 끝에는 '작은 꼬리'가 있습니다. #keleyi처럼 오늘은 스크롤 속도를 설정할 수 있을 뿐만 아니라 URL 링크에 "작은 꼬리"가 없는 jquery로 만든 스크롤 특수 효과를 소개하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" />
<style type="text/css">
#hovertree {
height: 800px;
background: red;
text-align:center;color:white;
}
#keleyi {
height: 800px;
background: green;text-align:center;color:white;
}
#myslider {
height: 800px;
background: black;text-align:center;color:white;
}
#zonemenu {
height: 800px;
background: yellow;text-align:center;
}
.keleyilink{position:fixed;}
.keleyilink a {text-decoration:none;}
</style>
</head>
<body>
<div class="keleyilink">
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>
<a href="javascript:scroll('keleyi');" target="_self">KKK</a>
<a href="javascript:scroll('myslider');" target="_self">myslider</a>
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>
</div>
<div id="hovertree">hovertree
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a>
</div>
<div id="keleyi">jb51</div>
<div id="myslider">myslider</div>
<div id="zonemenu">zonemenu</div>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery.hovertreescroll.js"></script>
<script>
function scroll(id) {
$("#" + id).HoverTreeScroll(1000);
}
</script>
</body>
</html>
간단한 구현 방법:
코드에는 한 문장만 있습니다
$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);
animate() 메소드는 CSS 사용자 정의 애니메이션 세트를 구현하는 데 사용됩니다.
첫 번째 양식은 아래와 같이 4개의 매개변수를 허용합니다
.animate( 속성 [, 기간] [, 완화] [, 완료] )
properties – 스타일 속성과 값을 포함하는 맵
지속 시간 – 사전 설정된 문자열 또는 밀리초 값일 수 있는 선택적 속도 매개변수
easing – 선택적 easing 유형입니다. jQuery에는 스윙과 선형이라는 두 가지 기본 유형만 있습니다. 다른 효과를 사용하려면 easing 플러그인을 설치해야 합니다
완료 – 애니메이션이 끝날 때 호출되는 선택적 콜백 함수
첫 번째 형태의 예시는 다음과 같습니다
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('The animation is finished.');
});
이 글에서 앵커 포인트 점프를 구현하는 코드는 첫 번째 형식을 사용합니다
$("html,body")는 html 또는 body 요소에 애니메이션을 적용하는 것, 즉 CSS 속성 값을 변경하는 것을 나타냅니다
scrollTop은 변경할 속성 값으로, 스크롤 막대가 슬라이드되는 거리를 나타냅니다. 여기서는 브라우저 스크롤 막대를 아래로 당긴 후 브라우저 상단에 숨겨진 html(본문)의 높이를 나타냅니다.
$("#elementid").offset().top은 브라우저 상단에서 숨겨야 하는 html(본문)의 높이입니다. 이는 ID가 elementid인 요소의 상단부터 까지의 절대 거리를 나타냅니다. 웹페이지 상단(브라우저의 표시 영역 상단이 아님).
1000은 애니메이션 시간이 1초임을 의미합니다
.animate(속성, 옵션)
하나는 속성 매핑이고, 다른 하나는 옵션 매핑입니다. 실제로 여기서 두 번째 매개변수는 다른 매핑에서 첫 번째 형식의 2~4개 매개변수를 캡슐화하고 두 가지 옵션을 추가합니다. 두 번째 형태의 코드는 다음과 같습니다.
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function(){
alert('The animation is finished.');
},
queue: boolen,
step: callback
});