请用微信小程序实现一个组件，当页面滑动超过3屏时，显示一个返回顶部的元素，点击可以返回到顶部

首先，在小程序的 `app.json` 文件中，添加需要的组件：

{
  "usingComponents": {
    "back-to-top": "/components/backToTop/backToTop"
  }
}

接下来，在 `components` 文件夹下创建一个名为 `backToTop` 的文件夹，并在其中创建 `backToTop.wxml`、`backToTop.wxss` 和 `backToTop.js` 三个文件。

在 `backToTop.wxml` 中，添加一个 `view` 元素：

<view class="back-to-top" hidden="{{!show}}" bindtap="backToTop">
  <image src="/images/top.png" class="back-to-top-icon"></image>
</view>

其中，`hidden` 属性根据 `show` 值来控制是否隐藏该元素，`bindtap` 属性绑定了点击事件 `backToTop`。

在 `backToTop.wxss` 中，定义该元素的样式：

.back-to-top {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  background-color: #ffffff;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: opacity 0.5s ease-in-out;
}

.back-to-top-icon {
  width: 40rpx;
  height: 40rpx;
}

其中，`position: fixed` 和 `bottom: 20rpx`、`right: 20rpx` 确定该元素的位置，`background-color`、`border-radius`、`width` 和 `height` 确定该元素的样式，`box-shadow` 添加一个阴影效果，`display: flex` 和 `justify-content: center`、`align-items: center` 让图标垂直、水平居中显示，`z-index: 999` 确定该元素的层级，`transition: opacity 0.5s ease-in-out` 添加一个渐变的过渡效果。

在 `backToTop.js` 中，定义该组件的逻辑：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    backToTop: function () {
      wx.pageScrollTo({
        scrollTop: 0
      })
    }
  }
})

其中，`properties` 定义了该组件的属性列表，`show` 表示该元素是否显示。`methods` 定义了该组件的方法列表，`backToTop` 方法触发点击事件，调用 `wx.pageScrollTo` 函数将页面滚动到顶部。

最后，在需要添加返回顶部功能的页面中，在 `onPageScroll` 事件中获取页面滚动的距离，并根据距离来控制 `back-to-top` 元素的显示与隐藏：

Page({
  data: {
    backToTopShow: false
  },

  onPageScroll: function (e) {
    if (e.scrollTop > 3 * wx.getSystemInfoSync().windowHeight) {
      this.setData({
        backToTopShow: true
      })
    } else {
      this.setData({
        backToTopShow: false
      })
    }
  }
})

其中，`backToTopShow` 表示 `back-to-top` 元素是否显示，根据页面滚动的距离来控制该值的变化。`wx.getSystemInfoSync().windowHeight` 获取屏幕高度，`e.scrollTop` 获取页面滚动的距离。当页面滚动超过 3 屏时，`backToTopShow` 的值为 `true`，否则为 `false`。

这样，在页面滑动超过 3 屏时，就会显示一个返回顶部的元素，点击该元素就可以返回到顶部啦！