vue实现鼠标滚动一定距离出现返回按钮

<template>

  <div>

    <div class="cf" ref="previewText"  style="height:5000px"  id="header">

      文本

    </div>

    <span class="btn_run" @click="returnTop" id="searchBar">

      返回

    </span>

  </div>

</template>

<script>

export default {

  data(){

    return{

    }

  },

mounted(){

  window.addEventListener('scroll',this.btn_pos)

},

  methods:{

    returnTop(){

      document.querySelector("#header").scrollIntoView(true)

    },

    btn_pos(){

      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

      let offsetTop = document.querySelector("#searchBar").offsetTop;

      console.log(scrollTop)

      if(scrollTop<=400){

        document.querySelector("#searchBar").style.display = 'none'

      }else{

        document.querySelector("#searchBar").style.display = 'block'

        document.querySelector("#searchBar").style.top = '600px';

      }

    }

  },

  destroyed(){

    window.removeEventListener('scroll',this.btn_pos)

  }

}

</script>

<style scoped>

.btn_run{

  position: fixed;

  display: none;

  right: 30px;

  box-sizing: border-box;

  z-index: 2;

  height: 50px;

  width:50px;

  border-radius: 5px;

  border: 1px solid rgb(126, 123, 123);

  cursor: pointer;

  line-height: 50px;

  background-color: rgb(126, 123, 123);

  box-shadow: 0 0 14px 6px gray;

  opacity: 0.3;

  color: white

}

</style>