js JQuery를 구현하는 방법 맨 위로 이동 function_jquery

많은 웹사이트에는 맨 위로 돌아가기 효과가 있습니다. 이 문서에서는 jquery를 사용하여 맨 위로 돌아가기 버튼을 구현하는 방법을 설명합니다.
먼저 다음 HTML 요소를 상단에 추가해야 합니다.

< /span> 상단 반환

a 태그는 앵커 포인트 상단을 가리킵니다. 이는 상단에 의 앵커 포인트를 방지할 수 있습니다. 브라우저가 js를 지원하지 않도록 최상위로 돌아가는 효과도 얻을 수 있습니다.
맨 위로 반환된 이미지를 오른쪽에 표시하려면 다음과 같은 CSS 스타일도 필요합니다.

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

/*returnTop*/
p#back-to-top{
position:fixed
display:none; >하단:100px;
오른쪽:80px;
}
p#뒤로 a{
text-align:center; :#d1d1d1;
display:block;
width:64px;
/*CSS3의 전환 속성을 사용하여 점프 링크의 텍스트에 그라데이션 효과 추가*/
-moz-transition :color 1s;
-webkit -transition:color 1s;
-o-transition:color 1s
p#back-to-top a:hover{
color:# 979797;
}
p#back-to-top a 범위{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; -radius:6px;
display :block;
width:56px;
margin-bottom:5px>/*그라디언트를 추가하려면 라벨 배경색에 대한 효과*/
-moz-transition:Background 1s;
-o-transition:Background 1s; 🎜>#뒤로 가기 a:hover 범위 {
배경:투명 URL(/static/imgs/sprite.png?1202) no-repeat -25px -290px;


위 스타일의 배경 이미지는 스프라이트 이미지입니다. 친구의 편의를 위해 아래에 두 개의 별도 맨 위로 돌아가기 사진이 제공됩니다.

예, HTML과 스타일, 페이지 스크롤 시 페이드 인 및 페이드 아웃되는 맨 위로 돌아가기 버튼을 제어하려면 js도 사용해야 합니다.
코드 복사 코드는 다음과 같습니다.

<script> <div class="codetitle">$(function(){ <span>//When 스크롤바 위치가 위에서 100픽셀 미만이면 점프링크가 나타나고, 그렇지 않으면 사라집니다. <a style="CURSOR: pointer" data="40558" class="copybut" id="copybut40558" onclick="doCopy('code40558')">$(function () { <u>$(window).scroll(function(){ </u>if ( $(window).scrollTop ()>100){ </a>$("#back-to-top").fadeIn(1500) </span>} </div>else <div class="codebody" id="code40558">{ <br>$( "#back-to-top").fadeOut(1500); <br>} <br>}) <br>//점프 링크를 클릭하면 페이지 상단으로 돌아갑니다<br>$("# 맨 위로") .click(function(){ <br>$('body,html').animate({scrollTop:0},1000); <br>return false; <br>}); <br>}) <br>}); <br></script>


다음 주소를 통해 실제 효과를 보실 수 있습니다:
http://outofmemory .cn/code- snippet/tagged/javascript
참고로 페이지를 로드한 후 스크롤 막대를 약간 아래로 드래그해야 맨 위로 돌아가는 효과를 확인할 수 있습니다.