체크박스 선택 시 상단 스크롤 이동 문제
본문
사이트는 반응형입니다.
화면이 조금 아래로 이동한 상태에서 체크박스를 클릭하면, 체크박스가 선택되면서 스크롤이 상단으로 강제로 이동합니다.
그리고 선택 기준을 초과하면 메시지도 띄우는데 이때 메시지가 나타나면서 스크롤이 상단으로 이동합니다.
체크박스는 ul, li 사용하여 배치하였습니다.
href="#" 인 a 버튼을 누르면 상단 이동하는 것처럼 되는데 이를 막는 방법은 없을까요?
답변 부탁드리겠습니다 ㅠㅠ
<ul>
<li class="list"><input class="test_ckb" id="ck_1" name="" title="test" type="checkbox" value="test" /> <label for="ck_1"> <span class="title">제목</span> <span class="test_sub">설명</span> </label></li>
</ul>
답변 2
일단 해당 부분만으로는 ie 엣지 크롬에서 상단으로 이동하지는 않습니다.
아마도 다른 스크립트나 클래스의 영향으로 그런것 같네요.
일단 return false; 한번 넣어봐주세요.
<input class="test_ckb" id="ck_1" name="" title="test" type="checkbox" value="test" onclick="return false;" />
넣어봤지만 해결되지 않았습니다 ㅠㅠ... 늦었지만 답변 감사합니다! ㅠㅠ
답변 주셔서 감사드립니다. 아쉽게도 자체해결 하였습니다 ㅠㅠ
체크박스에 display:none; 속성을 주니 해결되었습니다.
그렇게하면 체크박스가 사라지지 않을까요?? 저도 현재 이 문제로 골치가 아프네요 ㅠㅠ 혹시 해결하신 방법 좀 들을 수 있을까요?
체크박스 디자인을 변경하여 사용해야 해서, 체크박스는 숨겨두고 라벨만 사용했습니다.
이때 코드를 찾아서 확인해보니,
lleft :0 , top :0 이게 있었네요... 화면내에 안보이지만, 화면에 있는 상태로 있기 때문에 선택하면 해당 위치로 이동하는 것 같았습니다. left, top만 지웠는데 원하는대로 동작했습니다.
지금은 display:none 이걸로 쓰고 있는데 absolute, visible 등 여러개 쓰는것보다 하나만 쓰는게 더 편한거 같네요.
체크박스는 화면 밖으로 내보내거나 아예 안보여야 합니다.
라벨에 속성을 주고 사용하셔야 합니다
도움이 되었음 좋겠습니다 ^^