<body>
<div id="Section1" style="height : 100vh ; background-color: rgb(255, 162, 162);"></div>
<div id="Section2" style="height : 100vh ; background-color: rgb(247, 219, 168);"></div>
<div id="Section3" style="height : 100vh ; background-color: rgb(255, 255, 203);"></div>
<div id="Section4" style="height : 100vh ; background-color: rgb(195, 255, 195);"></div>
<div id="Section5" style="height : 100vh ; background-color: rgb(208, 208, 255);"></div>
<a style="position:fixed;bottom:10px;right:10px;" title=”맨 위로" onclick="goToSection2()">
2번 섹션으로
</a>
</body>
<script>
const Section2 = document.querySelector("#Section2").offsetHeight;
goToSection2 = () => {
window.scrollTo({ top: Section2, behavior: 'smooth' });
};
</script>
<style>
body {
margin: 0;
}
</style>설명
브라우저 높이 만큼 차지하는 색이 다른 div 5개가 있고 우측 하단의 버튼을 누르면 특정 위치로 이동하는 버튼을 만들었다. 특정 요소의 높이값을 받아와서 이동시킨다. behavior : 'smooth' 를 통해 애니메이션을 가미하였다.
top을 0으로 해서 맨위로 가기 플로팅 버튼을 만들 수도 있고, 회원가입시 제대로 작성되지 않은 항목으로 강제로 이동시키는 등 응용이 가능하다.
FE 개발자가 되자