前端vue如何找到默认的头里的返回按钮的事件

Posted 2023-04-08

参考技术A 1. location.reload(false): 会用HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变 如果文档已改变,从服务端再次下载该文档 如果文档未改变
2. location.reload(true): 绕过缓存,从服务器上重新下载该文档 作用等同于点击浏览器的刷新按钮,同时按住Shift (Shift+F5)

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

参考技术A <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>