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

Posted 2023-03-21

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

Vue3返回顶部组件及返回顶部js封装

介绍

vue3中，封装监听页面滚动的js， 及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：

代码

1. 封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；
   在项目目录下新建 utils文件夹，并在该文件夹下创建index.js文件；在这文件里写全局通用的一些方法；现在需要用到的返回顶部的方法就写这里面。

/**
 * @监听屏幕滚动式时，是否显示返回顶部的按钮
 * @return  boolean  返回结果为布尔类型
 **/
export const startScroll = () =>