페이지를 상위로 되돌리는 세 가지 구현(앵커 태그, js)_javascript 기술

본 글에서는 페이지 상단으로 돌아가기 위한 간단한 코드 3개를 소개합니다. 간단한 HTML(http://www.jb51.net/web/62651.html) 앵커 태그를 사용할 수도 있습니다. Javascript Scroll (http://www.jb51.net/article/31422.htm) 이 함수는 동적으로 반환됩니다. 다른 것에는 약간 복잡한 플로팅 스크립트가 포함되어 있습니다. 필요에 따라 그 중 하나를 선택할 수 있습니다. 그러나 간단히 말해서 코드를 줄일 수 있으면 코드를 줄이십시오. Tianyuan 블로그가 좋지 않아서 이 기능은 추가되지 않을 것입니다.

1. 페이지 상단으로 돌아가려면 앵커 태그를 사용하세요

HTML 앵커 태그를 사용하는 것이 가장 쉬운 방법이지만 클릭하면 좀 보기 흉해집니다. 앵커 태그는 주소 표시줄에 표시되며 다른 것은 없습니다.
페이지 상단에 배치하세요.

태그 뒤 아무 곳에나 배치하세요. 정상에 가까이 머물러라.
페이지 하단에 배치:
맨 위로 돌아가기

2. 자바스크립트 스크롤 기능을 사용하여 맨 위로 이동

스크롤 기능은 스크롤 막대의 위치를 ​​제어하는 ​​데 사용됩니다. 두 가지 매우 간단한 구현 방법이 있습니다.
방법 1:
< ;a href="javascript:scroll(0,0 )">맨 위로 돌아가기
scroll의 첫 번째 매개변수는 가로 위치이고, 두 번째 매개변수는 세로 위치입니다. 수직으로 50픽셀에 위치시키려면 scroll(0,50)으로 변경하세요. 그게 다입니다.
방법 2:
이 방법은 위쪽으로 점진적으로 복귀하는 방식으로, 코드는 다음과 같습니다.

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

function pageScroll() {
window.scrollBy(0,-10)
scrolldelay = setTimeout('pageScroll()' ,100);
}
맨 위로 돌아가기>

동적으로 맨 위로 돌아갑니다. 맨 위로 돌아가면 코드는 여전히 실행 중입니다. 또한 이를 중지하려면 pageScroll 함수에 문장을 추가해야 합니다.

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

if(document.documentElement.scrollTop==0)clearTimeout (scrolldelay) ;

3. Onload와 스크롤 기능을 사용하여 동적으로 맨 위로 돌아갑니다.

1. 먼저 다음을 추가합니다. 웹 페이지의 BODY 태그 끝 ;div id="gotop">맨 위로 돌아가기