추가 Notes_jquery를 사용하여 웹페이지의 최상위 코드(다중 메소드)로 돌아갑니다.

맨 위로 돌아가기

맨 위로 돌아가기

function pageScroll(){
//지정된 픽셀 수만큼 콘텐츠를 스크롤합니다. (첫 번째 매개변수는 오른쪽으로 스크롤할 픽셀 수입니다. , 두 번째 매개변수는 아래로 스크롤하는 것입니다. 픽셀 수)
window.scrollBy(0,-100)
//위로 스크롤 효과를 시뮬레이션하기 위한 지연된 재귀 호출
scrolldelay = setTimeout('pageScroll() ',100);//scrollTop 값을 가져옵니다. DTD를 선언하는 표준 웹페이지는 document.documentElement.scrollTop을 사용합니다. 그렇지 않으면 둘 중 하나만 적용되고 다른 하나는 document.body.scrollTop을 사용합니다. 항상 0이므로 웹페이지의 실제 값은 합계 값을 사용하여 얻을 수 있습니다.
var sTop=document.documentElement.scrollTop document.body.scrollTop
//페이지가 표시될 때 판단합니다. 상단에 도달하여 지연 코드를 취소합니다. 그렇지 않으면 페이지가 상단으로 스크롤되어 더 이상 페이지를 정상적으로 탐색할 수 없습니다.
if(sTop==0)clearTimeout(scrolldelay)
}

맨위로

function gotoTop(min_height){
//상단을 반환하는 사전 정의된 html 코드, CSS 스타일의 기본값은 not
var gotoTop_html = '' 표시
//id가 있는 요소 끝에 맨 위로 돌아가는 html 코드를 삽입합니다. 페이지의 페이지
$("#page ").append(gotoTop_html)
$("#gotoTop").click(//맨 위로 돌아가도록 애니메이션을 정의하고 클릭하여 위로 스크롤하세요
function(){$('html,body').animate({ scrollTop:0},700);
}).hover(//상단 복귀 시 마우스 입력 피드백 효과를 높이기 위해 , CSS 클래스 추가 및 삭제를 사용하여
function(){$(this).addClass("hover ");},
function(){$(this).removeClass("hover"); 🎜>});
//페이지의 최소 높이를 가져옵니다. 값이 전달되지 않으면 기본값은 600픽셀입니다.
min_height ? min_height = min_height = 600//Bind 창의 스크롤 이벤트에 대한 핸들러 함수
$(window).scroll(function(){
//창의 스크롤 가져오기 막대의 수직 위치
var s = $(window). scrollTop()
//창 스크롤 막대의 수직 위치가 페이지의 최소 높이보다 크면 맨 위로 돌아가는 요소가 페이드 인되도록 하고, 그렇지 않으면 페이드 인됩니다.
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200)
}; );
};
gotoTop();


css 스타일 코드: