본 글에서는 페이지 상단으로 돌아가기 위한 간단한 코드 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">맨 위로 돌아가기
2. 그런 다음 다음 JS 스크립트 부분을 호출합니다(이 스크립트는 Tianyuan의 원본이 아니며 이전에 Z-BLOG 공식 포럼에 소스 패키지가 아직 없습니다. 작성자 링크와 함께, 원저자가 보시면 메시지를 남겨서 추가해 주세요.):
BackTop=function(btnId){
var btn=document.getElementById(btnId)
var d =document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null; this.timer=setInterval(function(){
d.scrollTop-=Math.ceil( d.scrollTop*0.1);
if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll =set);
};
함수 설정(){btn.style.display=d.scrollTop?'block':"none"}
}; >BackTop('gotop');
Z-BLOG의 경우 즉, $(document).ready(function(){.... 함수에 배치하거나 gotop.js와 같은 js 파일로 독립적으로 저장한 다음
물론 "Return to Top" 라벨 아래에 두는 것이 가장 좋습니다. 이 호출 방법은 경로가 JS라고 가정합니다. 다른 위치를 참조하세요.
보충사항
위의 최상위 복귀 코드는 모두 텍스트 형식입니다. 텍스트를 더 아름다운 아이콘으로 변경할 수도 있습니다. (즉, 페이지를 스크롤할 때, 맨 위로 돌아가기 아이콘도 따라옵니다. 실행되는 종류)에는 레이어 등을 사용해야 하는데 이는 약간 복잡하므로 이 문서에서는 나열하지 않습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
