로드를 통해 파일의 내용을 가져오고 앵커로 점프하는 jquery 메서드

이 기사의 예에서는 jquery가 로드를 통해 파일의 내용을 얻고 앵커 포인트로 점프하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

어제 왼쪽에는 탐색 기능이 있고 오른쪽에는 내용이 있는 도움말 문서와 유사한 페이지를 만들고 있었습니다. 원래는 iframe을 이용하여 오른쪽의 콘텐츠 표시 영역을 구현하려 했으나, iframe의 높이를 조정해야 했기 때문에 방식을 변경하여 jquery의 ajax에서 load 방식을 사용했습니다.

원격 파일의 내용을 가져오는 것은 구현하기 쉽습니다. jquery의 로드 메소드를 사용하면 됩니다.

$("#content").load("xxx.aspx")

이렇게 하면 콘텐츠 ID가 있는 태그에 xxx.aspx 파일의 콘텐츠를 쉽게 배치할 수 있습니다. 지금 달성해야 할 또 다른 효과는 파일의 내용을 얻은 후 해당 앵커 포인트로 점프해야 하므로 jquery의 scrollTop을 사용하는 방법을 생각한 것입니다. id="name"인 태그로 이동해야 합니다.

$("body,html").animate({scrollTop:$("#name").offset().top});

offset()은 현재 뷰포트에서 일치하는 요소의 상대 오프셋을 가져오는 것입니다. $("#name").offset().top은 상단에서 ID 이름이 있는 레이블의 상대 오프셋을 가져오는 것입니다. 현재 뷰포트. 위의 코드를 하나로 결합하면 다음과 같이 작성해야 합니다.

$(function(){
 $("#content").load("xxx.aspx",function(){
  $("body,html").animate({scrollTop:$("#name").offset().top});
 });
})

서버에 지속적으로 요청을 보내기 위해 탐색을 클릭하는 것을 방지하기 위해 매번 얻은 데이터를 저장할 수 있습니다.

물론 이 방법은 SEO 최적화를 고려하지 않은 페이지에만 적합합니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.