클릭시 위치이동하는 animate랑 #id랑 충돌해서 모션적용 안될때
animate후에 location hash 넘기도록 작업 그래야 focus가 갑니다요 웹접근성 이슈
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%
}
.box {
min-height: 100%;
}
ul {
position: fixed;
top: 0;
left: 50%;
display: flex;
list-style: none;
}
ul li a {
font-size: 30px;
color: #fff;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li><a href="#box1">box1</a></li>
<li><a href="#box2">box2</a></li>
<li><a href="#box3">box3</a></li>
</ul>
<div id="box1" class="box" style="background-color: #f00;">
<h2>box1</h2>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
<div id="box2" class="box" style="background-color: #0f0;">
<h2>box2</h2>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
<div id="box3" class="box last" style="background-color: #00f;">
<h2>box3</h2>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
</div>
<script>
$(function () {
$('ul li a').on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
console.log($target)
$('html, body').animate({
scrollTop: $(target).offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})
</script>
</body>
</html>
작업하다 알게 되는 지식 정리 👩🏻💻