반응으로 앵커 스크롤을 구현하는 방법

팁:

앵커 스크롤을 구현하려면 a 태그를 사용하지 마세요. 이렇게 하면 라우팅 점프가 발생하기 때문입니다.

(동영상 공유 학습: react 동영상 튜토리얼)

여기에서는 H5의 새로운 API인 scrollToAnchor가 사용됩니다. 앵커 포인트의 상단 또는 하단, 시작/끝

동작: 스크롤 효과를 나타냅니다. 자동/즉시/부드러움(스크롤 효과)

1 앵커 포인트의 기존 이름 속성을 id 속성으로 변경합니다. 이런 방식으로 document.getElementById 메소드를 사용하여 앵커 포인트를 편리하게 쿼리할 수 있습니다.

2. 원래 빨간색 버튼의 href 속성을 제거한 다음 onClick 메서드를 추가합니다. onClick 메서드는 앵커 포인트의 ID를 전달한 후 다음 함수를 사용하여 앵커 포인트를 찾고 앵커 포인트로 이동합니다.

관련 추천:

반응 튜토리얼

위 내용은 반응으로 앵커 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!