Ant Design 的 backTop 回到顶部组件，自定义容器、滚动高度。

一、效果展示

二、代码实现

说明：如果效果未出现，可能是以下原因。

1. 高度是否不够，可以通过设置 :visibilityHeight="500" 来确定按钮出现的时机；也要注意容器的高度是否满足条件，可以设置高一点来排查。
2. 指定的容器是否正确，可以通过:target来实现。注：当用类名获取dom元素时，得到的是数组，记得写上索引号。
3. 组件书写的位置是否正确。这个很重要！！！！！

<template>
  <div class="box">
    Scroll down to see the bottom-right
    <div class="smallBox" id="box">
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      指定容器如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。如果不设置高度和宽度的话，内容多也不会出现滚动条，因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
      <a-back-top :target="fn" :visibilityHeight="500"/>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      return document.getElementById('box')
    },
  }
}
</script>

<style scoped>
.box {
  height: 5500px;
}

.smallBox {
  border: 2px solid black;
  height: 1500px;
  width: 200px;
  margin: 100px;
  overflow-y: auto;
}
</style>

三、官方文档

BackTop 回到顶部文档