JQuery는 동일한 page_jquery의 앵커 링크 간에 부드러운 스크롤을 구현합니다.

저는 항상 웹 개발 프런트엔드에 JQuery를 사용해 왔습니다. JQuery를 접한 후에야 JQuery가 제가 생각했던 것보다 훨씬 더 강력하다는 것을 깨달았습니다. 특히 JQuery는 제가 생각했던 것보다 훨씬 더 강력할 수 있습니다. 호환성이 더 좋아 JS를 대체할 수 있는 재미있고 멋진 것들이 모두 사용된 JQuery를 사용하기로 결정했습니다.

JQuery를 사용하여 앵커 링크 간 원활한 스크롤을 구현하는 JQuery의 오늘 주제를 소개합니다. 이전에 JS를 사용하여 구현한 페이지 앵커 점프 버퍼 효과를 소개한 적이 있습니다. 그 효과는 상당히 좋으며 동일한 페이지의 앵커 링크 간에 부드러운 스크롤을 달성할 수 있습니다. 그러나 지금은 JS 코드가 더 좋습니다. JQuery가 로드되면 더 짧은 코드로 동일한 효과를 얻을 수 있습니다.

사용방법:

1. JQuery 라이브러리를 로드합니다.

2. 키코드:

$(document).ready(function() { 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
var $target = $(this.hash); 
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); 
if ($target.length) { 
var targetOffset = $target.offset().top; 
$('html,body').animate({ 
scrollTop: targetOffset 
}, 
1000); 
return false; 
} 
} 
}); 
});

여전히 로딩 순서를 강조하고 싶습니다. 먼저 JQuery 클래스 라이브러리를 참조하세요. 그건 그렇고, 테스트 후 스크롤 효과는 모든 브라우저에서 호환되고 적용 가능하지만 Opera에서는 약간 이상하게 작동하므로 개선이 필요합니다.