zoukankan      html  css  js  c++  java
  • Vue中实现回到顶部的功能

    参考:https://www.cnblogs.com/wangRong-smile/articles/11880249.html

    回到顶部的DOM部分:

    <div
        class="back_top"
        @mouseover="enterBackTop" // 鼠标进入回到顶部图标的背景颜色变深
        @mouseout="outBackTop"    // 鼠标移开,背景颜色变浅
        ref="backTop"
        :style="{ opacity: opacity }"
        v-show="gotop"
        @click="handleScrollTop"
      >
        <span class="iconfont icon-backtotop"></span>
    </div>

    script部分:

    props: ['ele'], // 这个是接收父组件传递过来的值
      data() {
        return {
          opacity: '.3',
          gotop: false,
          scrollHeight: 100,
          scrollTop: 0
        };
      },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true);  // 注册滚动事件
    },
    methods: {
        enterBackTop() {
          this.opacity = '1';
        },
        outBackTop() {
          this.opacity = '0.3';
        },
        handleScroll(e) {
          const that = this;
          const scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
          that.scrollTop = scrollTop;
          that.scrollTop > this.scrollHeight
            ? (this.gotop = true)
            : (this.gotop = false);
        },
        handleScrollTop() {
          // this.$nextTick(() => {
          //   this.ele.scrollIntoView({ behavior: 'smooth' });
          // });
          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);
        }
      }

  • 相关阅读:
    7.19 repeater的用法:
    7.18 内置对象
    7.17 三级联动 控件及JS简单使用
    7.15 简单控件 以及 复合控件
    7.14 Repeater
    7.14 ASP.NET介绍 基础
    phpcms图文总结(转载)
    phpcms图文总结(转)
    商业php软件的应用
    php前段时间复习
  • 原文地址:https://www.cnblogs.com/hahahakc/p/13321362.html
Copyright © 2011-2022 走看看