원클릭 복귀 기능 샘플 code_javascript 기술의 JS 구현

1. 기본 준비:

scrollTop() 메서드는 일치하는 요소의 스크롤 막대의 수직 위치를 반환하거나 설정합니다.

스크롤 상단 오프셋은 상단을 기준으로 스크롤 막대의 오프셋을 나타냅니다.

이 메소드가 매개변수를 설정하지 않으면 스크롤 막대 상단의 오프셋을 픽셀 단위로 반환합니다.

구문

$(selector).scrollTop(offset)

2.

toggleClass() 선택한 요소를 설정하거나 제거하는 하나 이상 Switch 여러 클래스 사이.

예를 들어 모든

요소를 설정하고 제거하는 "main" 클래스를 전환하려면 다음을 수행하세요.

코드 복사 코드는 다음과 같습니다.

$("button").click(function(){
$("p").toggleClass("main");
});

3.

setInterval() 메소드는 지정된 기간(밀리초)에 따라 함수를 호출하거나 표현식을 계산할 수 있습니다.

setInterval() 메서드는clearInterval()이 호출되거나 창이 닫힐 때까지 함수를 계속 호출합니다. setInterval()에서 반환된 ID 값은clearInterval() 메서드에 대한 인수로 사용될 수 있습니다.

4.

scrollTo() 메소드를 사용하면 지정된 좌표로 콘텐츠를 스크롤할 수 있습니다.

scrollTo(xpos,ypos)

매개변수 설명
xpos 필수입니다. 창 문서 표시 영역의 왼쪽 상단에 표시될 문서의 x 좌표입니다.
ypos가 필요합니다. 창 문서 표시 영역의 왼쪽 상단에 표시될 문서의 y좌표입니다.

원클릭 상향을 달성하는 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

var topbtn = $("#totop"); 한 번의 클릭으로 올라가고 싶은 버튼 요소
var lastScroll =
topbtn.css("display" , "없음");

window.onscroll = function(){ onscroll은 HTML5의 속성인 것 같습니다.
var top = $(window).scrollTop(); 처음에는 둘 다 0입니다.

코드 복사 코드는 다음과 같습니다.

if(top > 0 ){
topbtn.css("display" , "");
}
if(top == 0){시작 상태라면 업 아이콘이 표시되지 않습니다
topbtn .css("display", "none");
}
};

topbtn.click(function(){ 클릭 이벤트
var scrollTop = 0;
var curPos = $(window).scrollTop(); 이제 스크롤 막대의 위치
topbtn.addClass("movingtotop"); 이동 중에 다른 그림 표시
var step = Math.abs(scrollTop - curPos) / 200 ;
var tid = setInterval(function() {계속 호출, 애니메이션을 그림에 넣기
topbtn.toggleClass("movingtotop"); 요소 속성의 설정과 삭제를 번갈아 사용하는 절묘한 코드 조각 동적 깜박임 효과
if (curPos > scrollTop 14) {
curPos -= step;
step = step * 1.05; 속도가 점차 증가합니다
window.scrollTo(0, curPos); 🎜>} else if (curPos <= scrollTop 14){시작 위치로 직접 점프
window.scrollTo(0, scrollTop)
topbtn.removeClass("movingtotop")
clearInterval(tid) ); 루프 닫기
}
}, 0.01)