여러 일반적인 웹 페이지가 상위 코드로 돌아갑니다.

웹사이트에서는 클릭하여 head로 돌아가고 클릭하여 top으로 돌아가는 것은 매우 흔한 일입니다. 오늘은 간단한 클릭만으로 head로 돌아갈 수 있는 코드에 대해 이야기하겠습니다.

1. HTML 앵커 태그를 사용하는 것이 가장 쉽습니다

. 하지만 유일한 단점은 스타일이 별로 좋지 않아 이 앵커 태그가 표시된다는 것입니다.

<aname="top"id="top"></a>

상단에 가까우면 6c04bd5ca3fcae76e30b72ad730ca86d 태그 뒤 아무 곳에나 배치할 수 있습니다.

페이지 하단에 배치:

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

2. Javascript를 사용하세요 맨 위로 돌아가려면 스크롤 기능

스크롤 기능은 스크롤 막대의 위치를 ​​제어하는 ​​데 사용됩니다. 매우 간단한 두 가지가 있습니다. 구현 방법:

방법 1(권장: 간단하고 편리함):

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

스크롤의 첫 번째 매개변수는 가로 위치이고 두 번째 매개변수는 세로 위치입니다. 예를 들어 50에 위치시키려는 경우입니다. 픽셀을 세로로 스크롤하려면 스크롤(0,50)으로 변경하세요.

방법 2(효과에 초점: 천천히 위로):

이 방법은 위로 점진적으로 돌아가는 방식으로, 보기에 더 좋습니다.

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout(&#39;pageScroll()&#39;,100);}<ahref="pageScroll();">返回顶部</a>

동적으로 위로 돌아갑니다. 하지만 최상위로 돌아가더라도 코드는 그대로 남아 있습니다. 실행하려면 pageScroll 함수에 문장을 추가하여 중지해야 합니다.

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

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

1. 먼저 다음을 추가합니다.

<divid="gotop">返回顶部</div>

2. 그런 다음 다음 JS 스크립트 부분을 호출합니다.

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=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);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

웹 페이지에 배치하거나 gotop.js와 같은 js 파일로 독립적으로 저장한 후 다음 형식을 통해 호출할 수 있습니다.

<scriptsrc="/js/gotop.js"type=text/javascript></script>

물론 위치는 "맨 위로 돌아가기" 아래에 배치하는 것이 가장 좋습니다. label. 이 호출 방법은 파일 경로가 JS라고 가정하고 있으므로 다른 위치에 배치할 때에는 실제 상황에 맞게 수정하시기 바랍니다.

위는 일반적으로 사용되는 여러 웹 페이지입니다.상위 코드로 돌아가, 직접 수정하여 사용할 수 있습니다. 자세한 내용은 PHP 중국어 웹사이트~

에서 검색하세요.

JavaScript 단순 반환 상위 코드 및 주석

CSS-return to top code_html/css_WEB-ITnose

jQuery_jquery로 구현된 스마트 숨기기 및 슬라이딩 효과를 위한 상위 코드로 돌아가기

위 내용은 여러 일반적인 웹 페이지가 상위 코드로 돌아갑니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!