클릭시 스크롤이 상단으로 이동하거나 주소 뒤에 #이 붙으면 범인은 A태그!

어딘가를 클릭했는데 갑자기 스크롤이 상단으로 이동하거나

 

다른 주소로 이동했는데

 

이렇게 URI 가장 뒤에 #이 붙어있는 걸 본적 있는가?

 

이 두가지 현상의 범인은 모두 a태그다.

정확히는 <a href="#"> 형태의, #으로 막아놓은 A태그

 

보통 A태그 형태만 쓰고 기능은 자바스크립트로 구현하고 싶을 때 이런식으로 #으로 A태그의 기능을 막곤 하는데

#이 나름의 기능을 해버리기 때문에 원래 의도와 다르게 작동하는 것이라고 할 수 있다.

 

해결 방법은 여러가지가 있고 다 간단한데 ( 참고 : https://blog.mywebstyle.pe.kr/?p=65 )

필자는 <a href = "javascript:void(0);" > 의 형태로 a태그 기능을 막는 걸 선호하고 추천한다.

 

뭐 특별한 이유는 없지만 애초에 A태그를 #으로 ​​막는다는 것 자체가 귀차니즘의 산물인데

굳이 javascript 단에 가서 return false 나 preventDefault 같은 걸 쓰긴 번거롭고,

그렇다고 onclick을 html 태그 안에 집어넣는 건 표준 위반 같아서 괜히 찝찝하기 때문.

 

물론 이렇게 ( https://dreambringer.tistory.com/21 ) 애초에 a태그 전체를 선택해서 preventDefault를 걸 수도 있겠지만

 

이렇게 

 

 

상단으로 가기 기능을 쉽게 구현할 수 있는 편안함이 사라질 수도 있으니

전부 막기보단 그냥 <a href = "javascript:void(0);" > 쓰자! 추천!