Native js는 타오바오 홈페이지_javascript 스킬에 버튼을 눌렀을 때 천천히 상위로 돌아가는 효과를 구현합니다.

.container { 너비: 980px; 여백: 0 자동; 높이: 자동; 배경: #aaa;}
.content { 높이: 2000px; 테두리: 1px
#btn {
위치:고정;
오른쪽: 0;
높이: 55px; png ) no-repeat 0 -110px; } //배경 이미지를 마음대로 찾을 수 있습니다
font-size: 12px;
line-height: 55px
text-align: center; text- indent: -9999em;
cursor: 포인터
display: none;


다음은 전체 js 코드입니다


🎜>코드 복사

btn.style.color = "#ffffff"; //수정된 인라인 스타일이 가장 높은 우선순위를 가집니다.
btn.style.textIndent = "0em"
btn.style.BackgroundImage = "none"; 🎜> btn.style.BackgroundColor = "#FF4401";
}
function moveOut() {
btn.style.textIndent = "-9999em"
btn.style.BackgroundImage = "url (icons .png)";
}

function goTop(acceleration, time) { //맨 위로 돌아가는 속도를 조정하도록 매개변수를 수정합니다.
acceleration = 가속도 || 0.1;
time = 시간 | 10;
var speed = 1 가속;
function getScrollTop() { //스크롤 막대의 수직 거리를 가져옵니다
return document.documentElement.scrollTop || scrollTop;
}
function setScrollTop(value) { //스크롤 막대의 수직 거리를 설정합니다. 효과를 얻기 위한 핵심은 짧은 간격 내에 스크롤 막대의 수직 거리를 지속적으로 수정하는 것입니다. 스크롤 효과
document.documentElement.scrollTop = value;
}
window.onscroll = function() {
var scrollTop()
if (scrollTop > 100) { //스크롤 막대가 창 상단에서 얼마나 떨어져 있는지 판단할 때 표시됩니다. 여기서는 100px입니다.
btn.style.display = "block"
} else; {
btn.style.display = "없음";
}
};
btn.onclick = function() {
var 타이머 = setInterval(function() {
setScrollTop (Math.floor(getScrollTop() / speed)) ; //이 코드 줄이 핵심입니다. 스크롤 막대의 수직 거리를 가져와 속도로 나눈 다음 스크롤 막대까지의 수직 거리를 설정합니다. >if (getScrollTop() == 0)
clearInterval(timer);
}
}
goTop(0.2, 8)}; false)


물론 다른 구현 방법도 있습니다. 다른 방법의 주요 코드는 아래에 나와 있습니다.




코드 복사


코드는 다음과 같습니다.

여기 코드는 주로 인터넷의 다른 리소스를 참조하며, 제가 이해한 내용을 약간 추가합니다. 물론 JavaScript가 가장 일찍 지원한 window.scrollTo()와 같은 다른 구현 방법도 있습니다. jQ를 사용하여 구현한다면 코드의 양은 매우 작아질 것입니다. w3cplus

를 참고하시면 됩니다. 개인적으로 데이터 유형, 클로저, 상속 등을 파악하는 등 네이티브 JavaScript를 먼저 잘 배워야 한다고 생각합니다. , 범위, DOM, CSS 및 이벤트 처리, Ajax 등. 다른 프레임워크에 익숙해지면 훨씬 쉽게 배울 수 있습니다.