[Vue.js] 컴포넌트 : 맨위로 버튼(Scroll Top Button) 만들기

회사에서 뷰로 작업중인데 맨위로 버튼 좀 만들어 달라고 하셔서 이것 저것 방법을 찾다가 구현완료 !

포스팅으로 정보 공유하면 좋을 것 같아서 이렇게 기록하게 되었다.

생각보다 방법은 간단하다 !

 

 

[components] 폴더에 topButtonComponet.Vue를 하나 생성해준다. (파일명은 자유 ~.~)

 

---

 

1. 버튼은 a태그로 만들어도 되고, 취향껏 만들고 CSS로 디자인도 만들어준다.

<template>
    <a class="gotop_button" v-show="goTopBtnShow" @click="goTop()">
      <span>Top</span>
    </a>
</template>

 

2. 나는 v-show를 사용하여 스크롤 위치에 따라 나타나거나 숨겨지도록 함수를 구현했다.

v-show는 true 일 때 display:block; false일 때 display:none; 시켜버린다.

<script>
export default {
  data(){
    return{
      goTopBtnShow: this.goTopBtnShow
    }
  },
  methods: {
    handleScroll(){
      this.goTopBtnShow = window.scrollY > 400;
    },
    goTop() {
      window.scrollTo({top: 0, behavior: 'smooth'});
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); 
  }
}
</script>

 

스크롤 위치가 400 보다 커지면 그때 true를 반환, 400보다 작아지면 false를 반환한다.

window.scrollTo에 behavior: 'smooth' 를 적용시키면 버튼 클릭 시 스크롤이 서서히 올라가는 효과를 줄 수 있다.

behavior를 줬는데 효과가 먹지 않는다면 a태그에 href 속성이 있는 지 확인, 있다면 과감히 빼준다.

 

3. 맨 위로 버튼이 나타나거나 숨겨질 때 서서히 효과를 주고 싶다면 Vue Transition을 이용하자.

<template>
  <Transition>
    <a class="gotop_button" v-show="goTopBtnShow" @click="goTop()">
      <span>Top</span>
    </a>
  </Transition>
</template>

 

template 아래 적용시킬 버튼 바로 상위에 <Transition>태그를 감싸 준 후, 공식 문서에서 처럼 CSS도 추가해주면된다.

아래 공식문서 참고 !

Vue.js

https://ko.vuejs.org/guide/built-ins/transition