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

다음은 주석과 함께 최상위로 복귀 효과를 간단한 코드로 구현한 것입니다.
1. 가장 간단한 정적 복귀 페이지 상단으로 바로 이동하려면 클릭하세요. 일반적으로 페이지 하단에 고정 배치됩니다.
방법 1: 이름을 사용합니다. 앵커를 클릭하면 사전 설정된 ID가 top

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

맨 위로 돌아가기

방법 2: 스크롤 기능을 작동하여 위치 조절 스크롤바 (첫 번째 매개변수는 가로 위치, 두 번째 매개변수는 세로 위치)

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

맨 위로 돌아가기

단점: 반품 효과는 다음과 같습니다. 즉각적이며 일반 탐색 페이지의 스크롤 느낌과 일치하지 않습니다.
페이지 하단에 고정되어 있어 사용자가 반드시 볼 수 있는 것은 아닙니다.

2. 상단으로의 간단한 정적 복귀, js를 사용하여 스크롤 효과를 시뮬레이션하고 상단으로 슬라이드

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

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)
}

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

맨위로

단점: 스크롤 효과가 부드럽지 않으며, 페이지가 너무 길 경우 클릭하면 맨 위로 이동합니다. 페이지 상단에 도달하지 않으면 더 이상 페이지를 정상적으로 탐색할 수 없습니다.
위와 동일하지만 여전히 페이지 하단에 고정되어 사용자에게 노출되지 않을 수 있습니다.

3. 동적 온디맨드 상단으로 다시 로드, CSS 측면 화면 절대 위치 지정, 간단한 jQuery 애니메이션과 결합하여 더 나은 경험 제공

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

function gotoTop(min_height){
//상단을 반환하는 사전 정의된 html 코드, CSS 스타일의 기본값은 not
var gotoTop_html = '

Return to top

' 표시
//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 스타일 코드:

코드 복사

코드는 다음과 같습니다.

/*기본 스타일, 주로 위치:화면의 절대 위치를 달성하기 위해 고정*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor: 포인터; margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;배경:#fff;}
/*CSS 사용 ie6*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop documentElement.clientHeight * 3/4 ​​​​"px")}
/에서 위치:고정 효과를 달성하기 위한 표현식(표현식) *마우스가 피드백 효과에 들어갑니다*/
#gotoTop.hover{ background:#5CB542;color:#fff;text-꾸밈:none;}

이 메서드는 페이지 높이를 결정합니다. 필요에 따라 "맨 위로 돌아가기"를 반환합니다. "사용자에게 표시되는 화면의 절대 위치 지정은 CSS 스타일을 사용하여 이루어지며, jQuery를 사용하여 보다 부드러운 스크롤 효과를 얻습니다. 추가로 고려해야 할 사항은 사용자가 js를 비활성화하도록 브라우저를 설정한 경우 세 번째 솔루션을 첫 번째 솔루션과 결합할 수 있다는 것입니다. js를 비활성화한 후 세 번째 솔루션이 비활성화되지 않으면 사용자에게 표시되지 않습니다. js 코드의 문장 첫 번째 옵션을 숨깁니다.

간단히 말하면, 긴 페이지는 최대한 피해야 합니다. 불가피할 경우 "맨 위로 돌아가기" 기능을 추가하면 사용자에게 상대적으로 더 나은 경험을 제공할 수 있습니다.