inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

.offset().top; 관련 오류

7378

김영순

작성한 질문수 2

0

해당 스크립트를 사용한 페이지에서는 잘 돌아갑니다.

그런데. 스크롤이벤트를 적용하지 않은 다른 페이지에서는 아래와 같은 오류가 나는데요.

이벤트가 없기떄문에 페이지 보는건 문제는 없지만. 왜 그런지 알고싶습니다.

해결방법은 있을까요.

 scripts.js:89 Uncaught TypeError: Cannot read property 'top' of undefined

인터랙티브-웹 javascript HTML/CSS jquery

답변 1

0

깡코딩

안녕하세요! 김영순님 :)

코드를 응용 수정해 보다가 문제가 생겨서 문의 주신것 같네요^.^

해당 오류는 탑 속성을 가지고 오지 못하기 때문에 생기는 오류입니다.

섹션6-8 리모컨 만들기 코드를 보면

if($(this.hash).offset()){

$('html')

.animate({

scrollTop:$(this.hash).offset().top

}, 500);

}

다음과 같은 구문이 있습니다.

이 구문을 보면 if문이 있습니다.

if($(this.hash).offset())

바로 이 부분 인데요 이 부분이 바로 해당 요소가 있는지 체크하는 부분입니다

해당 요소가 있다면 오프셋 값이 나오기 때문에 아래 구문이 실행되고

scrollTop:$(this.hash).offset().top 

오프셋 탑 값을 가지고 올수 있게 되는겁니다 :D

만약 해당 요소의 오프셋 값이 없다면 아래 구문을 실행하지 않게 되므로

오프셋 탑 속성을 가지고 오는 구문이 실행되지 않게되고 오류가 생기지 않을겁니다 :)

도움이 되셨나요??

즉 스크롤 이벤트를 적용하지 않는 페이지라면 스크롤에 관련된 해당 요소가 없기 때문에 

if($(this.hash).offset()) 

이프문으로 체크를 해서 스크롤에 관련된 코드가 실행되지 않도록 하는겁니다:)

만약 이해가 가지 않으시면 섹션6-8 강좌를 참고해 보세요!!

그럼 또다른 궁금증이 생길때 언제든 문의주세요 :D

다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요

0

197

1

반응형에 대해 질문이 있습니다 !

0

367

1

날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?

0

379

1

함수가 정의되기 전에 함수 호출

0

344

1

섹션12 보너스 챕터에 관한 질문입니다!

0

468

1

5-3-1 강좌 섹션 질문 합니다.

0

312

1

죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.

1

463

3

화면 높이 관련 질문 있습니다.

1

433

1

선생님

0

370

1

5-2 vanilla.html 질문합니다.

0

422

1

5-3-2 질문입니다.

1

293

1

5-2 추가 질문이요

0

345

2

5-2 ! 질문이요.

0

266

1

안녕하세요!

0

272

1

질문드립니다.

1

366

2

질문드립니다.

0

1664

3

색션6강 카운트관련 문의드립니다!

0

238

1

섹션5 관련 질문드립니다.

0

261

1

setProperty 를 재활용 하고싶습니다.

0

210

1

IntersectionObserver

0

255

1

offsetheight와 scrollheight

0

398

1

완성된코드를 그대로 가져왔는데 크기가 이상해요

0

428

2

2:56에 10씩 증가시키는건 어떻게 하신건가요?

0

316

1

<script>에 $(function(){})으로 감싸준 이유

0

207

1