[카페24] 맨 위로 / 맨아래로 부드럽게 이동

구현화면

---

레이아웃

<!--@css(/quicknav.css)-->
<!--@js(/quicknav.js)-->

<div class="quick_nav_inner">
  <a href="https://pf.kakao.com/_ewtWG" target="_blank" class="roundBtn kakaoBtn">
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <title>kakao 로고</title>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M15 7C10.029 7 6 10.129 6 13.989C6 16.389 7.559 18.505 9.932 19.764L8.933 23.431C8.845 23.754 9.213 24.013 9.497 23.826L13.874 20.921C14.243 20.958 14.618 20.978 15 20.978C19.971 20.978 24 17.849 24 13.989C24 10.129 19.971 7 15 7Z"
        fill="#231815"
      ></path>
    </svg>
  </a>
  <div class="updown">
    <a href="javascript:void(0);" onclick="scrollToTop();" class="roundBtn upBtn">
      <div class="line1"></div>
      <div class="line2"></div>
    </a>
    <a href="javascript:void(0);" onclick="scrollToBottom();" class="roundBtn downBtn">
      <div class="line1"></div>
      <div class="line2"></div>
    </a>
  </div>
</div>

 

스타일시트

#quick_nav .quick_nav_inner {
  position: fixed;
  right: 12px;
  bottom: 25px;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
#quick_nav .quick_nav_inner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}

#quick_nav.show .quick_nav_inner {
  opacity: 1;
  visibility: visible;
}
#quick_nav .quick_nav_inner,
#quick_nav .updown {
  gap: 5px;
}
#quick_nav .roundBtn {
  width: 35px;
  height: 35px;
  background: #ffffff;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #231815;
}

#quick_nav .updown {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#quick_nav [class^="line"] {
  width: 1px;
  height: 30%;
  background: #231815;
}
#quick_nav .upBtn div {
  transform-origin: top;
}
#quick_nav .upBtn .line1 {
  transform: translateX(0px) rotate(45deg);
}
#quick_nav .upBtn .line2 {
  transform: translateX(-1px) rotate(-45deg);
}

#quick_nav .downBtn div {
  transform-origin: bottom;
}
#quick_nav .downBtn .line1 {
  transform: translateX(0px) rotate(45deg);
}
#quick_nav .downBtn .line2 {
  transform: translateX(-1px) rotate(315deg);
}

 

자바스크립트

// 맨 위로 스크롤하는 함수
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

// 맨 아래로 스크롤하는 함수
function scrollToBottom() {
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: "smooth",
  });
}