JQuery 애니메이션 페이지 스크롤 맨 위로 이동 애니메이션 효과(Chrome과 호환)

JQuery 애니메이션 페이지 스크롤 맨 위로 이동 애니메이션 효과(Chrome과 호환)_jquery

WBOY

풀어 주다： 2016-05-16 18:34:30

원래의

1273명이 탐색했습니다.

먼저 다음 '맨 위로 돌아가기' 링크에 클래스를 추가하세요.
맨 위로 돌아가기↑
< ;!--페이지 상단으로 돌아가는 모든 링크에 클래스를 추가합니다. 예: backtotop--> 그런 다음 이 코드 줄을 앞이나 다른 위치에 추가할 수 있습니다. . 물론 에 jQuery 라이브러리 파일도 포함해야 합니다. (

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

 
jQuery(document).ready(function () { 
jQuery('.backtotop').click(function(){ 
jQuery('html').animate({scrollTop:0}, 'slow'); 
} 
 

그렇게 간단합니까? 기본적으로 jQuery('html')를 사용하면 Safari와 Chrome에서 원하는 개체를 선택할 수 없습니다(어딘가에서 본 기억이 나네요. 이 아래에서는 Chrome이 Safari의 핵심을 사용합니다). 두 개의 브라우저를 사용하는 경우에는 대신 jQuery('body')를 사용할 수 있습니다. 따라서 코드의 호환성을 높이기 위해 여기에서는 jQuery1.3에서 제공하는 jQuery.browser 메서드를 사용합니다. , 이 방법은 더 이상 권장되지 않습니다. jQuery1.3은 다양한 브라우저의 각 기능 및 버그에 대한 속성 컬렉션을 표시하는 새로운 jQuery.support 메서드를 추가합니다. 즉, 브라우저를 판단하려면 jQuery1.3이 더 이상 권장되지 않습니다. 특정 기능을 직접 판단하는 것이 좋습니다. 그런데 이 선택자 문제가 어떤 기능에 속해야 할지 모르기 때문에 여전히 예전 방식(jQuery1.3에서는 jQuery.browser 방식을 사용하고 있습니다. 계속 지원됩니다)

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

jQuery(document).ready(function () { 
jQuery( '.backtotop').click(function(){ 
if(jQuery.browser.safari) {//브라우저가 사파리인지 확인하려면 여기 
jQuery('body') .animate({scrollTop:0 }, 'slow'); 
return false;//false를 반환하면 원래 링크 뒤에 #을 추가하는 것을 피할 수 있습니다. 
} 
else{ 
jQuery('html') .animate({scrollTop:0 }, 1500); 
return false; 
} 
}) 

위 코드에서는 Go to jQuery('body')를 사용합니다. ).animate({scrollTop:0}, 'slow'); 실제 필요에 따라 스크롤 속도를 변경할 수 있습니다. '느리게', '빠르게'를 사용하거나 1000(1초를 나타냄)과 같은 특정 숫자를 사용할 수 있습니다. , 특정 숫자를 사용할 때는 작은따옴표를 추가할 필요가 없습니다). 또한, {scrollTop:0}은 페이지 상단으로 돌아가는 것을 의미합니다. 원하는 특정 위치로 페이지를 스크롤하려는 경우 label(ID) 메소드를 사용할 수 있습니다. ID가 'myID'인 영역 (....
) 상단에서 비슷한 방법을 사용할 수 있지만 먼저 이 영역과 페이지 상단 코드는 다음과 같습니다. 

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

jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow')

//jQuery('#myID').offset() .top은 ID가 myID

인 영역에서 페이지 상단까지의 거리를 계산할 수 있습니다.