微信小程序怎么实现点击外侧的回到顶部scroll-view

要实现点击 `scroll-view` 组件外侧回到顶部，可以使用 `scroll-view` 组件提供的 `scroll-into-view` 方法，通过改变当前滚动位置来实现。

具体实现步骤如下：

1. 在 `scroll-view` 组件上添加 `id` 属性，用来标识当前组件。

2. 在小程序页面的 `wxml` 中，添加一个覆盖整个页面的 `<view>` 元素，设置其 `catchtouchmove` 属性为 `true`，阻止滚动事件冒泡到父元素。

3. 在 `<view>` 元素中添加一个点击事件，在事件处理函数中调用 `scroll-into-view` 方法，将 `scroll-view` 组件的 `scroll-top` 属性设置为 0，即回到组件顶部。

示例代码如下：

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

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

<!-- page.js -->
Page({
  scrollToTop() {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
})

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

.scroll-view {
  height: 100%;
}

<!-- 注意：这里的 id 必须和 scroll-view 组件的 id 相同 -->
#my-scroll-view {
  height: 100%;
}

需要注意的是，在使用 `scroll-into-view` 方法时，需要保证页面已经渲染完成，否则可能会出现滚动位置不准确的情况。如果遇到这种情况，可以考虑在 `onReady` 生命周期中调用 `createSelectorQuery` 方法，获取 `scroll-view` 组件的位置信息，然后再调用 `scroll-into-view` 方法。