이 효과를 얻으려면 먼저 다음 기본 지식을 이해해야 합니다. 양식 스크롤 이벤트: $(window).scroll(function(){...}) 양식 스크롤 거리 가져오기: $ (window ).scrollTop(); 폼의 높이를 구합니다: $(window).height(); 위 내용을 이해하면 하이퍼링크 컨트롤을 통해 맨 위로 돌아가는 효과를 얻을 수 있습니다. 1. 인터페이스 구조 코드 준비: 코드 복사 코드는 다음과 같습니다. < 양식 id="form1" runat="server"> jQuery를 사용하여 맨 위로 돌아가기 효과 얻기 . . . . . . (콘텐츠가 많으므로 스크롤 가능) 맨 위로 돌아가기 2. 상단 컨트롤에 스타일 추가: >코드 복사 코드는 다음과 같습니다: </div>.backToTop <div class="codebody" id="code49356">{ <br>배경 색상: 노란색 ; <br>너비: 30px; <br>테두리 너비: 1px; <br>글꼴 두께; <br>font-family: Arial; <br>font-size: x-large; <br>cursor: 포인터 <br>position:absolute; // 위치는 절대값으로 설정되어야 합니다. <br> 100px; <br>} <br> 3. 최고의 효과를 얻으려면 코드 복사 코드는 다음과 같습니다. $(document).ready(function () { </u>$("#backToTopLink").attr( "title", "맨 위로 이동") </a>$("#backToTopLink").attr("href", "#Top"); 링크로 위로 가기</span>$(window).scroll(function () { </div>if ($(window).scrollTop() <= 100) { <div class="codebody" id="code27330">$("#backToTopLink").fadeOut(200 ); <BR>} <BR>else { <BR> $("#backToTopLink").fadeIn(400) <BR>} <BR>var v_Top = $(window).height() - $(". backToTop").height() - 10 $(window).scrollTop(); // 스크롤 후 상단 버튼의 상단 위치를 동적으로 계산 <BR>$(".backToTop").css("top", v_Top " px"); <BR>}); <BR>}); <BR> 이 코드는 반환 효과를 달성하기 위한 하이퍼링크 컨트롤을 보여주기 위한 것일 뿐입니다. 상단에. jQuery 애니메이션 효과를 사용하여 부드러운 상단 위치 지정을 구현할 수도 있습니다. 정상으로 다시 원활하게 전환하는 코드는 다음과 같습니다. $('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px' }, 800);} ); // $("#backToTopLink").attr("href", "#Top");
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
