jQuery를 사용하여 페이지를 맨 위로 되돌리는 방법(코드 첨부)

웹사이트를 탐색할 때 페이지를 아래로 슬라이드하면 상단으로 돌아가기 버튼이 나타나는 것을 보셨나요? HTML 페이지 상단으로 돌아가려면 클릭하세요. 이 기사에서는 가장 간단한 HTML 페이지를 맨 위로 반환하는 jQuery 코드를 공유합니다. 관심 있는 친구들은 이를 참조할 수 있습니다.

페이지를 맨 위로 되돌리는 효과를 얻으려면 function(), animate, fadeOut 등과 같은 많은 JavaScript 지식이 필요합니다. 확실하지 않은 경우 PHP 중국어 웹사이트의 관련 기사를 참조할 수 있습니다. 또는 JavaScript 비디오 튜토리얼을 방문하세요.

예제 설명: 사용자가 페이지를 아래로 슬라이드하면 스크롤 막대와 상단 사이의 거리가 100px보다 클 때 fadeIn을 사용하여 상단으로 돌아가기 위해 버튼을 클릭하면 버튼이 사라집니다. 구체적인 코드는 다음과 같습니다.

HTML 부분:

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

CSS 부분:

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

JavaScript 부분:

참고: jQuery로 작성되었으므로 jQuery 파일

$(function(){
         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //当点击跳转链接后，回到页面顶部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

Rendering을 가져와야 합니다.

위에서는 jQuery를 사용하여 HTML을 구현하는 방법을 공유했습니다. 페이지 상단으로 돌아가는 코드는 매우 상세하고 이해하기 쉽습니다. 이 글이 도움이 되셨으면 좋겠습니다!

【관련 권장 튜토리얼】

1. jQuery 중국어 참조 매뉴얼
2. jQuery 비디오 튜토리얼
3. bootstrap 튜토리얼

을 다운로드하려면 다음을 방문하세요. 뒤로 상위코드 칼럼!

위 내용은 jQuery를 사용하여 페이지를 맨 위로 되돌리는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!