精华内容
下载资源
问答
  • Vue回到顶部

    2021-02-03 10:57:13
    Vue回到顶部 <template> <div id="goTop"> <div class="goTop" v-show="goTopShow" @click="goTop"> 回到顶部 </div> <div style="height:2000px;"></div> </div> ...

    Vue回到顶部

    <template>
      <div id="goTop">
        <div class="goTop" v-show="goTopShow" @click="goTop">
          回到顶部
        </div>
        <div style="height:2000px;"></div>
      </div>
    </template>
     <script>
    export default {
      name: "goTop",
      data() {
        return {
          scrollTop: "",
          goTopShow: false,
        };
      },
      methods: {
        handleScroll() {
          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          if (this.scrollTop > 200) {
            this.goTopShow = true;
          }
          else{
             this.goTopShow = false; 
          }
        },
        goTop() {
            let timer = setInterval(function () {
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            let 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.handleScroll);
      },
      destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
      },
    };
    </script>
      
     <style scoped>
    .goTop {
      position: fixed;
      right: 40px;
      bottom: 60px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      padding: 10px;
      cursor: pointer;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    }
    </style>
    
    展开全文
  • vue 回到顶部

    2020-07-03 14:25:00
    html代码 这里样式就... <div @click="backTop"> <i class="iconfont icon-shangjiantou"></i> ...在methods中写上回到顶部的方法 // 点击图片回到顶部方法,加计时器是为了过渡顺滑 backTop () {

    html代码 这里样式就忽略吧 只是一个简单的上箭头图标
    这里记得绑定点击事件

     <div @click="backTop">
          <i class="iconfont icon-shangjiantou"></i>
           <p>顶部</p>
     </div>
    

    在methods中写上回到顶部的方法

     // 点击图片回到顶部方法,加计时器是为了过渡顺滑
            backTop () {
                const that = this;
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop -4000;
            },
     // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
            scrollToTop () {
                const that = this
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                that.scrollTop = scrollTop
                if (that.scrollTop > 60) {
                    that.btnFlag = true
                } else {
                    that.btnFlag = false
                }
            },
    
    展开全文
  • vue回到顶部

    2020-08-20 17:42:32
    当页面出现上下滚动条时,页面右下角出现回到顶部功能。 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏。点击DIV快速回到顶部。 <div v-if="btnFlag" ...

    当页面出现上下滚动条时,页面右下角出现回到顶部功能。

    在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏。点击DIV快速回到顶部。

         <div
      v-if="btnFlag"
      class="backTop"
      @click="backTop"
    >
      <img src="@/assets/needsAnalysis/top.png">
      <p>顶部</p>
    </div>
    
    btnFlag: false,
    
      mounted () {
        window.addEventListener('scroll', this.scrollToTop)
      },
      destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
      },
    

    // 点击图片回到顶部方法,加计时器是为了过渡顺滑

    backTop () {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    
    // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
    scrollToTop () {
      const that = this
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    

    链接
    https://www.cnblogs.com/Charles-Yuan/p/11469290.html

    展开全文
  • Vue 回到顶部

    千次阅读 2019-07-03 17:14:39
    滑动区域: <div id="target"> <-- 内容 !...思路:添加滚动监听,获取实时位置,点击返回顶部按钮时开启定时器,在定时器里处理位置 mounted () { document.getElementById('targe...

    滑动区域:

    <div id="target">
       <-- 内容 !-->
    </div>

    参数设置

    scrollTop: 0,
    timer: null,

    思路:添加滚动监听,获取实时位置,点击返回顶部按钮时开启定时器,在定时器里处理位置

        mounted () {
           document.getElementById('target').addEventListener('scroll', this.scrollToTop)
        },
        methods: {
          scrollToTop() {
            this.scrollTop = document.getElementById('target').scrollTop
          },
          backTop() {
            this.timer = setInterval(()=>{
              this.scrollToTopTimer()
            },20)
          },
          scrollToTopTimer() {
            let scrollTop = this.scrollTop
            if(scrollTop > 0) {
              scrollTop -= 100
              if(scrollTop <= 0) {
                scrollTop = 0
                clearInterval(this.timer)
              }
            }
            document.getElementById('target').scrollTop = scrollTop
          }
        },
        destroyed () {
          clearInterval(this.timer)
          document.getElementById('target').removeEventListener('scroll', this.scrollToTop)
        }

    监听与定时器要销毁

    展开全文
  • 主要为大家详细介绍了vue回到顶部监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 回到顶部简单动画效果

    千次阅读 2018-08-30 11:45:59
    vue 回到顶部动画效果 html &lt;template&gt; &lt;div id="toTop" @click="toTop"&gt;&lt;/div &gt; &lt;/template&gt; js &lt;script&gt; let...
  • vue回到顶部,滚动条监听,移除监听
  • vue 回到顶部效果

    千次阅读 2019-05-30 14:50:59
    回到顶部按钮BackToTop.vue组件: <template> <transition :name="transitionName"> <div class="page-component-up" @click="backToTop" v-show="visible" :style="cus...
  • Vue回到顶部功能

    2020-11-02 10:22:33
    适用于一个页面有很多个滚动区域,对每一个滚动区域单独控制 3、还有一种全局的回到顶部组件,用的是elementui组件的回到顶部 只要滚动到下一页时,回到顶部按钮才会出现,点击可以回到顶部 1、在文件components下面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 457
精华内容 182
关键字:

vue回到顶部

vue 订阅