JavaScript는 단순히 최상위 코드와 주석으로 돌아갑니다.

우리의 일상적인 개발 과정에서 사용자에게 더 나은 경험을 제공하기 위해 우리 페이지에는 맨 위로 돌아가기 기능이 있을 것입니다. 가장 일반적인 것은 JavaScript를 사용하여오늘은 JavaScript를 도입하는 것입니다. 간단하게 상위 코드로 돌아가서 댓글을 남겨보세요!

최근에 카테고리가 많은 순위 페이지를 만들어서 사진과 텍스트로 표시했는데... 결국 페이지가 너무 길어서 당연히 사용자 경험도 좋지 않았습니다. 마지막으로 페이지 상단에 페이지 내 점프 탐색을 추가하여 이 페이지의 카테고리 명명 앵커 블록으로 직접 이동할 생각을 했습니다. 물론 더 나은 경험을 얻으려면 "맨 위로 돌아가기" 기능과 결합해야 합니다. 물론 일반적인 상황에서는 먼저 너무 긴 페이지를 피해야 합니다. 내용이 약하고 관련성이 충분하지 않으면 이탈률이 매우 높아집니다.

다음은 주석과 함께 최상위 효과로의 간단한 코드 구현입니다.

1. 가장 간단한 정적 상단으로 돌아가기, 클릭하면 페이지 상단으로 직접 이동, 페이지 하단의 고정 배치에서 흔히 사용되는 상단으로 돌아가기 기능

방법 1: 이름이 지정된 앵커를 사용하여

html code

<a href="#top" target="_self">返回顶部</a>

방법 2: 스크롤 기능을 작동하여 스크롤 막대의 위치를 ​​제어합니다. (첫 번째 매개변수는 수평 위치이고, 두 번째 매개변수는 가로 위치입니다. 매개변수는 세로 위치입니다)

html code

<a href="javascript:scroll(0,0)">返回顶部</a>

단점: 반환 효과가 즉각적이고 일반 탐색 페이지의 스크롤 느낌과 일치하지 않습니다.

페이지 하단에 정적으로 고정되어 있을 수 있습니다. 사용자에게 표시되지 않습니다.

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

js code

 pageScroll(){
    window.scrollBy(0,-100);
    scrolldelay = setTimeout('pageScroll()',100);
     sTop=document.documentElement.scrollTop+document.body.scrollTop;
    (sTop==0) clearTimeout(scrolldelay);
}

html code

<a onclick="pageScroll()">返回顶部</a>

단점: 스크롤 효과가 부드럽지 않습니다. , 페이지가 매우 긴 경우 상단으로 돌아가려면 클릭하세요. 페이지 상단에 도달하지 않으면 더 이상 페이지를 정상적으로 탐색할 수 없습니다.

위와 동일하게 여전히 고정되어 있습니다. 페이지 하단에 표시되며 사용자에게 노출되지 않을 수 있습니다.

3. 동적 주문형 로딩, CSS 측면 화면 절대 위치 지정, 간단한 jQuery 애니메이션과 결합되어 더 나은 경험을 제공합니다

js 코드

 gotoTop(min_height){
     gotoTop_html = &#39;<p id="gotoTop">返回顶部</p>&#39;;
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(
(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
    }).hover(        (){$().addClass("hover");},
(){$().removeClass("hover");
    });
    min_height ? min_height = min_height : min_height = 600;
    $(window).scroll((){
         s = $(window).scrollTop();
        ( s > min_height){
            $("#gotoTop").fadeIn(100);
        }{
            $("#gotoTop").fadeOut(200);
        };
    });
};
gotoTop();

css 스타일 코드

{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}

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

요약:

요컨대, 긴 페이지는 최대한 피해야 합니다. 부득이한 경우 "맨 위로 돌아가기" 기능을 추가하면 사용자에게 상대적으로 더 나은 경험을 제공할 수 있기를 바랍니다. .

관련 권장 사항:

최상위 효과의 JavaScript 구현 예

javascript - iframe 외부에서 iframe의 콘텐츠를 맨 위로 돌아가게 만드는 방법

JS는 맨 위로 특수 효과를 구현합니다

위 내용은 JavaScript는 단순히 최상위 코드와 주석으로 돌아갑니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!