微信小程序怎么实现点击外侧的回到顶部详细代码

下面是一个完整的示例代码，实现了点击小程序页面外侧或 `scroll-view` 组件外侧回到顶部的功能。

<!-- page.wxml -->
<scroll-view id="my-scroll-view" class="scroll-view">
  <view class="content">
    <!-- ... 页面内容 ... -->
  </view>
</scroll-view>

<view class="page" catchtouchmove="true" bindtap="scrollToTop">
  <!-- ... -->
</view>

<!-- page.js -->
Page({
  data: {
    scrollTop: 0,
    scrollHeight: 0
  },
  onLoad() {
    const query = wx.createSelectorQuery()
    query.select('#my-scroll-view').boundingClientRect()
    query.exec(res => {
      this.setData({
        scrollHeight: res[0].height
      })
    })
  },
  onPageScroll(event) {
    this.setData({
      scrollTop: event.scrollTop
    })
  },
  scrollToTop() {
    if (this.data.scrollTop > 0) {
      this.setData({
        scrollTop: 0
      })
    } else {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
})

<!-- page.wxss -->
.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroll-view {
  height: 100%;
}

.content {
  height: 2000rpx;
}

#my-scroll-view {
  height: 100%;
}

.back-to-top {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  background-color: #888;
  color: #fff;
  padding: 10rpx;
  border-radius: 20rpx;
  z-index: 9999;
}

在这个示例中，我们首先在 `onLoad` 生命周期中使用 `createSelectorQuery` 方法获取 `scroll-view` 组件的高度，并将其保存到 `scrollHeight` 变量中，用来判断当前滚动位置是否已经超过了组件底部。

然后，在 `onPageScroll` 方法中，我们监听页面滚动事件，并将当前滚动位置保存到 `scrollTop` 变量中。

在 `scrollToTop` 方法中，我们首先判断当前滚动位置是否已经超过了 `scroll-view` 组件底部，如果是，则直接调用 `setData` 方法将 `scrollTop` 变量的值设置为 0，即回到页面顶部；否则，调用 `wx.pageScrollTo` 方法实现平滑滚动到页面顶部。

最后，在 `wxml` 中，我们添加了一个覆盖整个页面的 `<view>` 元素，设置其 `catchtouchmove` 属性为 `true`，阻止滚动事件冒泡到父元素。同时，在 `<view>` 元素中添加了一个点击事件，在事件处理函数中调用 `scrollToTop` 方法，实现点击页面外侧回到顶部的功能。

另外，我们还添加了一个样式类 `.back-to-top`，用来设置返回顶部按钮的样式。