vue滚动监听按钮显示隐藏+返回顶部功能

需求是移动端的返回顶部和按钮显示与隐藏。

html+css

<div id="app">

        <div style="height:1000px;">

        </div>

        <button @click="backtop" v-if="flag" style="position:fixed; bottom:0" ref="backtop">reverse</button>

    </div>

js部分
var vm = new Vue({

            el: "#app",

            data: {

                flag: ""

            },

            methods: {

                getScroll() {

                    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

                    console.log(this.scrollTop)

                    if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 300) {

                        this.flag = true

                    } else {

                        this.flag = false

                    }

                },

         backtop(){

          const timer = setInterval(function(){

            const osTop = document.documentElement.scrollTop || document.body.scrollTop;

            const ispeed = Math.floor(-osTop / 5);

            document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;

            this.isTop = true;

            if(osTop === 0){

              clearInterval(timer);

            }

          },30)

      },

            },

            mounted() {

                window.addEventListener('scroll', this.getScroll);

            }

        })