> 웹 프론트엔드 > JS 튜토리얼 > jQuery를 사용하여 페이지 스크롤(스크롤) 효과를 얻는 완벽한 방법

jQuery를 사용하여 페이지 스크롤(스크롤) 효과를 얻는 완벽한 방법

巴扎黑
풀어 주다: 2017-06-29 09:39:06
원래의
1732명이 탐색했습니다.

많은 블로거들이 과거에 페이지 스크롤(스크롤) 효과를 얻기 위해 jQuery를 사용하는 방법을 작성/재게시했지만 지금까지 발견된 대부분의 방법에는 Opera에서 작은 버그가 있습니다. 바로 점프를 사용하면 화면이 깜박이는 원인이 됩니다.

오늘은 초저지 전문가인 Willin이 Opera에서 스크롤 효과를 구현하는 jQuery의 버그를 해결하는 완벽한 방법을 공유했습니다. 저는 즉시 이를 debug+ 현재 테마에 적용해 보았는데 완벽합니다. . 설명을 추가하기 위해 특별히 코드를 게시했습니다.

저는 js에 대해 잘 모르고 jQuery는 피상적이기 때문에 원리를 명확하게 설명할 수는 없지만 수정 방법만 설명할 수 있습니다.

Demo: 기사 페이지 제목 "Leave a comment"Assumption 아래 현재 주제 zOM/"

x comments

" 하단에 있는 "Δ"을 클릭하세요. topic은 header, 하단의 id는 top

jQuery 코드는 다음과 같습니다:

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false
로그인 후 복사

Instructions: comments

$('#top ').click(function (){...}); 이것은 스크롤을 위한 기본 코드입니다. 즉, 한 가지 예에서 추론을 그릴 수 있습니다. 상단에서 하단으로 스크롤하고 특정 ID로 스크롤하고 중간으로 스크롤할 수 있습니다....

그럼 "댓글 상자"로 스크롤하는 또 다른 예를 게시하겠습니다.

예: 기사 제목 아래에 "댓글 추가"가 있고 원본 HTML은 다음과 같습니다

<p id="add-comment"><a href="#respond"></a></p>
로그인 후 복사

(참고: #respond는 댓글 상자의 ID입니다)

Then $('#top').click(function (){...}); 이 코드는 다음과 같습니다.

$
scrollTop $top 
 false
로그인 후 복사

그렇습니다. 간단하지 않나요? 어떤 친구들은 원칙을 말하고 jQ를 배우세요

더 많은 방법을 보려면 Willin의 "페이지 스크롤의 여러 방법"으로 이동하세요

진술: 이 기사는 BY-NC-SA 계약에 따라 승인되었습니다 | ZWWoOoOo
재인쇄 소스 "jQuery를 사용하여 페이지 스크롤(스크롤) 효과를 구현하는 완벽한 방법"

원문 보기
카테고리: Javascript 댓글 보기

위 내용은 jQuery를 사용하여 페이지 스크롤(스크롤) 효과를 얻는 완벽한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿