H5项目锚点，返回顶部案例，elementUI框架的Backtop源码

你的名字 2022-11-22 05:09 53阅读 0赞

案例：如下图所示：点击下面小火箭使页面返回到最顶端。

![在这里插入图片描述][20201103150739326.png_pic_center]

个别同学在h5项目中使用scrollIntoView方法会导致部分安卓手机不生效，ios手机会突然返回顶部，没有动画效果。本案例方法是参考elementUI框架的Backtop源码进行修改的，且兼容性很好，主要代码如下面代码块内容所示。

> 其他说明：不同的手机或者系统，获取容器滚动scrollTop的值的元素可能不一样，有的是html元素，有的是body元素，所以需要兼容。（其实还可以使html和body都不滚动，在vue项目中使用最顶层的div即可，但是由于项目初衷设计时不是这样设计的，所以后续维护时就兼容html和body）

ElementUI组件中Backtop组件源码如下：

<template>
      <transition name="el-fade-in">
        <div
          v-if="visible"
          @click.stop="handleClick"
          :style="{
            'right': styleRight,
            'bottom': styleBottom
          }"
          class="el-backtop">
          <slot>
            <el-icon name="caret-top"></el-icon>
          </slot>
        </div>
      </transition>
    </template>
    
    <script>
    import throttle from 'throttle-debounce/throttle';
    
    const cubic = value => Math.pow(value, 3);
    const easeInOutCubic = value => value < 0.5
      ? cubic(value * 2) / 2
      : 1 - cubic((1 - value) * 2) / 2;
    
    export default {
      name: 'ElBacktop',
    
      props: {
        visibilityHeight: {
          type: Number,
          default: 200
        },
        target: [String],
        right: {
          type: Number,
          default: 40
        },
        bottom: {
          type: Number,
          default: 40
        }
      },
    
      data() {
        return {
          el: null,
          container: null,
          visible: false
        };
      },
    
      computed: {
        styleBottom() {
          return `${this.bottom}px`;
        },
        styleRight() {
          return `${this.right}px`;
        }
      },
    
      mounted() {
        this.init();
        this.throttledScrollHandler = throttle(300, this.onScroll);
        this.container.addEventListener('scroll', this.throttledScrollHandler);
      },
    
      methods: {
        init() {
          this.container = document;
          this.el = document.documentElement;
          if (this.target) {
            this.el = document.querySelector(this.target);
            if (!this.el) {
              throw new Error(`target is not existed: ${this.target}`);
            }
            this.container = this.el;
          }
        },
        onScroll() {
          const scrollTop = this.el.scrollTop;
          this.visible = scrollTop >= this.visibilityHeight;
        },
        handleClick(e) {
          this.scrollToTop();
          this.$emit('click', e);
        },
        scrollToTop() {
          const el = this.el;
          const beginTime = Date.now();
          const beginValue = el.scrollTop;
          const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
          const frameFunc = () => {
            const progress = (Date.now() - beginTime) / 500;
            if (progress < 1) {
              el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
              rAF(frameFunc);
            } else {
              el.scrollTop = 0;
            }
          };
          rAF(frameFunc);
        }
      },
    
      beforeDestroy() {
        this.container.removeEventListener('scroll', this.throttledScrollHandler);
      }
    };
    </script>

[20201103150739326.png_pic_center]: /images/20221120/a48331ca47434a1598f735d28206ba72.png