Как написать событие скроллинга как в vuetify?

Question

Подскажите как сделать такую же кнопку при скроллинге как на их официальном сайте. Получается у них при нажатии на кнопку снизу справа страница прокручивается до начала страницы и она исчезает. Появляется снова при прокрутке вниз.

https://v2.vuetifyjs.com/ru/components/floating-action-buttons/

Answer 1

вот так

var app = new Vue({
  el: '#app',
  data: {
    buttonShow: false,
  },
  mounted: function () {
    this.checkScrollPosition();
    window.addEventListener('scroll', this.checkScrollPosition);
  },
  methods: {
    checkScrollPosition() {
      this.buttonShow = window.pageYOffset > 10;
    },
    click() {
      scroll({
        top: 0,
        behavior: "smooth"
      });
    },
  },
})

.content{
  height: 1000px;
  background-color: #ffDDDD;
}

.button{
  position: fixed;
  right: 25px;
  bottom: 25px;
  background-color: #99FF99;
  cursor: pointer;
  padding: 5px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="content"></div>
  <transition name="fade">
    <div v-if="buttonShow" @click="click" class="button">Летим вверх</div>
  </transition>
</div>

БЛОГ НА HUSL

Как написать событие скроллинга как в vuetify?

Ответы (1 шт):