[Java Script] a 태그 클릭으로 이벤트 실행시, 페이지가 맨위로 자동 스크롤 되는 현상

보통 a태그에 연결된 자바 스크립트의 함수를 실행하는 경우, 

href에 임의의 값 (ex. "#")을 작성하고 onclick에 실행할 자바스크립트의 함수명을 작성합니다.

<a href="#" onclick="popup();">팝업 열기</a>

 

 

하지만, 이때, 페이지에 나타는 목록이 많아 스크롤이 생성된 상태로 해당 a 태그를 클릭한다면.

popup()함수가 실행되기는 하지만 페이지가 맨위로 자동 스크롤이 올라가서 불편한 경우가 생깁니다.

 

이때는 2가지 방법으로 해당 문제점을 해결할 수 있습니다.

<a href="#test" onclick="popup();">팝업 열기</a>

<a href="javascript:popup();">팝업 열기</a>

1. href="#" 에서 #뒤에 다른 글자를 추가합니다. (test, abc 등 상관없어요)
2. href="javascript:함수이름();"으로 변경