Taobao 홈페이지의 상단 버튼은 다음과 같습니다. 버튼에 마우스를 놓으면 버튼 배경이 회색으로 변하고 아이콘이 텍스트로 변합니다. 버튼을 천천히 상단으로 클릭하십시오
그러한 효과를 달성하기 위해 어떤 이벤트를 추가 해야하는지 먼저 분석하겠습니다. 버튼 안팎으로 마우스를 이동하고 버튼 성능이 변경되므로 버튼에 마우스 오버 및 마우스 아웃 이벤트를 추가해야합니다. 스크롤 바의 변경 사항을 보려면 스크롤 이벤트를 창에 추가하고 버튼을 클릭하여 상단으로 돌아가서 버튼에 클릭 이벤트를 추가하십시오. 이벤트 핸들러를 MoveIn, MoveOut, GoTop에서 세 가지 기능으로 캡슐화합니다.
HTML/CSS 코드는 다음과 같습니다
코드 사본은 다음과 같습니다.
<div>
<div> 머리 </div>
<div> 주요 내용은 높이가 2000px </div>입니다
<divbtn "> 위로 돌아 가기 </div>
</div>
코드 사본은 다음과 같습니다.
.Container {너비 : 980px;
.Content {높이 : 2000px;
#btn {
위치 : 고정;
하단 : 50px;
오른쪽 : 0;
너비 : 54px;
높이 : 55px;
배경 : URL (icons.png) No -Repeat 0 -110px} // 마음대로 배경 이미지를 찾을 수 있습니다
글꼴 크기 : 12px;
라인 높이 : 55px;
텍스트 정렬 : 센터;
텍스트 안정 : -9999EM;
커서 : 포인터;
디스플레이 : 없음;
아래는 전체 JS 코드입니다
코드 사본은 다음과 같습니다.
window.addeventListener ( "load", function () {
var btn = document.getElementById ( "btn");
btn.addeventListener ( "마우스 오버", movin, false);
btn.addeventListener ( "마우스 아웃", MoveOut, False);
함수 movein () {
btn.style.color = "#ffffff";
btn.style.textIndent = "0em";
btn.style.backgroundimage = "none";
btn.style.backgroundcolor = "#ff4401";
}
함수 moveOut () {
btn.style.textIndent = "-9999em";
btn.style.backgroundimage = "url (icons.png)";
}
function gotop (가속, 시간) {// 매개 변수를 수정하여 상단으로 돌아갈 속도를 조정합니다.
가속도 = 가속도 ||;
시간 = 시간 || 10;
var 속도 = 1 + 가속도;
function getscrolltop () {// 스크롤 막대의 수직 거리 얻기
RETURN.DocumentELement.scrolltop ||
}
함수 setScrolltop (value) {// 스크롤 막대의 수직 거리를 설정하십시오.
document.documentElement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function () {
var scrolltop = getScrollTop ();
if (scrolltop> 100) {// 스크롤 바가 창 상단에서 얼마나 멀리 떨어져 있는지 결정할 때 100px입니다.
btn.style.display = "block";
} 또 다른 {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterVal (function () {
setScrolltop (math.floor (getscrolltop () /speed));
if (getscrolltop () == 0)
ClearInterval (타이머);
}, 시간);
};
}
gotop (0.2, 8);
}, 거짓);
물론 다른 구현 방법이 있으며 다음은 다른 방법에 대한 주요 코드입니다.
코드 사본은 다음과 같습니다.
btn.onclick = function () {
ClearInterval (타이머);
var timer = setInterVal (function () {
var now = scrolltop; // 스크롤 막대의 수직 거리
속도 = (0- 지금) / 10;
속도 = 수학 (속도);
if (지금 == 0);
ClearInterval (타이머);
document.documentElement.scrolltop = now + 속도; // 표준 모드
hocess.body.scrolltop = now + 속도; // 이상한 모드
}, 15);
}
여기서 코드는 주로 인터넷의 다른 리소스를 말하며 자신의 이해를 약간 추가합니다. 물론 JavaScript가 가장 빨리 지원하는 Window.scrollto ()와 같은 다른 구현 방법이 있습니다. JQ로 구현하면 코드 볼륨이 매우 작아집니다
개인적으로, 데이터 유형, 폐쇄, 상속, 범위, DOM, CSS, 이벤트 처리, AJAX 등과 같은 기본 JavaScript를 먼저 배우는 것이 훨씬 쉽다고 생각합니다.