Node.js 앵커 스크롤 예제 공유

부트스트랩으로 작성되었습니다. 다음은 건조 정보입니다. ul의 각 li의 각 a에 있는 href는 앵커 대상을 가리킵니다(예: <li><a href="#index">홈</a></li>. <li class="active"><a href="#index">Home</a></li>。 下面给出我发现好的源代码：

$('#navbar-menu ul li a[href^="#"]').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
                });

翻译一下：点击的时候，首先阻止了默认行为，然后让html,和body滚动动画，滚动到离顶部的距离为目标的offset().top的距离，在4毫秒内完成。hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分），所以this.hash是指当前的地址的#部分。关于this表示的对象，以后会总结。 
ps:$('body').scrollspy({ target: '#menu-nav' }) 제가 찾은 소스 코드는 다음과 같습니다.

rrreee

번역: 클릭 시 먼저 기본 동작을 방지한 다음 html 및 본문 스크롤 애니메이션을 대상 거리만큼 위에서부터 거리까지 스크롤하도록 합니다. offset().top의 작업은 4밀리초 안에 완료됩니다. hash 속성은 읽고 쓸 수 있는 문자열로, URL의 앵커 부분(# 기호로 시작하는 부분)이므로 this.hash는 현재 주소의 # 부분을 참조합니다. 이것이 나타내는 객체에 대해서는 나중에 정리하겠습니다.
ps:$('body').scrollspy({ target: '#menu-nav' } )이 부트스트랩의 스크롤 스파이 플러그인은 대상 스크롤을 자동으로 모니터링하고 해당 활성을 변경하는데 이는 매우 좋습니다.

관련 권장 사항:

🎜내비게이션 앵커 스크롤 효과의 Javascript 구현🎜🎜

위 내용은 Node.js 앵커 스크롤 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!