<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height : 2000px;
}
</style>
</head>
<body>
<h3 id="title">제목</h3>
<h1><a href="#" style="position:relative; bottom:-1800px;" onclick="showAlert()">맨 위로 이동</a></h1>
<script>
function showAlert() {
alert('실험실');
}
</script>
</body>
</html>
위의 코드를 실행하여 ' 맨 위로 이동 '을 클릭하면
alert이 발생하고, 페이지 맨 위로 이동한다.
만약에
스크롤이 굉장히 긴 페이지에서 중간에 버튼을 눌러 뜬 popup창에서 무언가 작업을 하고
popup창을 끄면 그 위치 그대로여야 하는데.... href="#" 때문에 페이지 스크롤이 맨 위로 올라가게 된다.
사용자의 편의성을 굉장히 해친다.....
(필자도 옷을 볼때, 마음에 드는 옷이 있어서 자세히 보기 눌렀는데... 옷을 보고 나면 페이지 맨 위로 올라와져 있어서.... 정말 짜증이 났다...)
결론
1. href 속성을 없애던가,
2. href 속성을 없애면 cursor가 손가락 모양으로 안 나오는게 그러면 -> cursor: pointer css를 적용한다.
3. href="javascript:void(0);"을 한다.
'javascript' 카테고리의 다른 글
| .attr() , .removeAttr() 사용법 (0) | 2022.11.04 |
|---|---|
| 객체(object), 객체 속성 추가 (0) | 2022.11.02 |
| a href="javascript:void(0);" 와 a href="javascript:;" (0) | 2022.10.24 |
| 논리연산자(||) 활용하기 : 매개변수 디폴트 할당 (0) | 2022.10.04 |
| selector expression (0) | 2022.07.22 |