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

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

반응형

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

맨 위로

간단히 이렇게 했었다.

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

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

방법1 ]

맨 위로

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

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

방법2 ]

TOP

div가 아니라 span이나 td 등을 사용해도 되고

cursor:pointer 는 마우스 커서를 손가락 모양으로 변경해 주는 스크립트

onclick 이벤트에

window.scrollTo 를 사용해서 (x,y) 를 (0,0) 으로 이동 시켜 주는 스크립트.

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

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

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

1 버튼 cs

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

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

1 버튼 cs

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

[참조]

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

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-

https://jjinbbangworld.tistory.com/2

반응형

from http://action713.tistory.com/1638 by ccl(A) rewrite - 2021-12-01 12:27:37