화면 맨 위로 이동 + a태그에 js연결할 때 화면 맨 위로 이동x

원래 HTML 코딩할 때 주던 방식은

<a href="#top">맨 위로</a> 

간단히 이렇게 했었다.

그러나, 저렇게 써 주면 접근성 오류는 물론이고 웹표준 프로그램 돌리면 링크 오류 뜬다....

 

이 경우 주소의 제일 뒤에 #이 붙는다. http:/어쩌고../# < 이런식으로 이 # 기호는 추후 파라미터오류가 나는 경우가 있어서 비추!!

 

 

방법1 ] 

 

<a href="#" onClick="javascript:window.scrollTo(0,0)">맨 위로</a>

 

위와 같이 하면 동작 잘된다. 그러나 위 방법으로 쓰는 것은 <a> 태그에 #기호를 쓰기 때문에 웹표준 오류다.

만약 이미지로 top 버튼을 준다면 아래와 같이 해보자

<input type="button" value="맨위로" onClick="javascript:window.scrollTo(0,0)" />
<input type="image" src="top.gif" onClick="javascript:window.scrollTo(0,0)" alt="맨위로" />

 

방법2 ]

<div style="cursor:pointer;" onclick="window.scrollTo(0,0);">TOP</div>

div가 아니라 span이나 td 등을 사용해도 되고
cursor:pointer 는 마우스 커서를 손가락 모양으로 변경해 주는 스크립트
onclick 이벤트에
window.scrollTo 를 사용해서 (x,y) 를 (0,0) 으로 이동 시켜 주는 스크립트.

결국 클릭시 최상단으로 이동된다.

 

 

 

a href="#" 태그 맨 위로 스크롤 되는점 해결 ]

a 태그에 자바스크립트를 연결하는 경우 보통

1

<a href="#" class="btn" onclick="function();">버튼</a>

cs

이런 식으로  a href="#" 태그를 쓰는데

이 경우 태그를 클릭할 때 마다 화면이 맨 위로 스크롤 된다.

1

<a href=javascript:;" class="btn" onclick="function();">버튼</a>

cs

이런 방식으로 태그를 바꿔주면 스크롤이 이동하지 않는다.

 

---

[참조]

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=cacung82&logNo=10182005650 

[javascript] 간단한 맨 위로(Top) 기능 주기

 

https://velog.io/@naynara/%ED%81%B4%EB%A6%AD%EC%8B%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%B5%9C%EC%83%81%EB%8B%A8%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%8F%99%ED%95%98%EB%8A%94-TOP%EB%B2%84%ED%8A%BC%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-

클릭시 페이지 최상단으로 이동하는 TOP버튼(자바스크립트)

 

https://jjinbbangworld.tistory.com/2

a href="#" 태그 맨 위로 스크롤 되는점 해결