Element: [Bug Report] el-backtop is not available, error target is not existing:.Page-component__scroll.el-scrollbar__wrap

[hswyxj]

Element UI version

2.9.1

OS/Browsers version

window7 chrome版本 75.0.3770.80（正式版本） （64 位）

Vue version

2.6.10

Reproduction Link

https://codepen.io/pen/?editors=1111

Steps to reproduce

官网也是一样的，可以直接看https://element.eleme.cn/#/zh-CN/component/backtop=》在线运行看
1、代码运行如下代码

2、运行完控制台报错
Error: target is not existed: .page-component__scroll .el-scrollbar__wrap

What is Expected?

超出高度出现返回顶部的控件，点击返回顶部

What is actually happening?

没有返回顶部的控件
控制台报错
Error: target is not existed: .page-component__scroll .el-scrollbar__wrap

[element-bot]

Translation of this issue:

Element UI version

2.9.1

OS/Browsers version

Windows 7 Chrome version 75.0.3770.80 (official version) (64 bits)

Vue version

2.6.10

Reproduction Link

Https://codepen.io/pen/?Editors=1111

Steps to reproduce

The same is true for official websites. You can see https://element.eleme.cn/ zh-CN/component/backtop= online.

1. The code runs the following code
   

2. Error reporting of console after running
   Error: target is not existing:.Page-component__scroll.el-scrollbar__wrap

   What is Expected?

Control that appears beyond height and returns to the top. Click to return to the top.

What is actually happening?

Control that does not return to the top
Console Error Reporting

Error: target is not existing:.Page-component__scroll.el-scrollbar__wrap

[KongLIngZhen]

:target=".yourClass"; target里写需要回到顶部的容器样式，虽然不报错了，但我试这个组建，还不能用，不知道为什么

[DaXiong1]

确实有这个问题，初始化就报错：Error: target is not existed: .page-component__scroll .el-scrollbar__wrap
麻烦解决下

[Choicelin]

这个组件原样复制示例代码，修改或不修改target都无法看到该组件展示

[Choicelin]

@Choicelin 补充，未报错

[fudax]

这个组件原样复制示例代码，修改或不修改target都无法看到该组件展示

我也是这个问题，换了很多方法，最后弃了~

[hooray]

无解，同样的问题，使用不了

[Funnyang]

target 是触发滚动的对象，这个元素具体是指产生滚动的那个元素。

比如父级元素固定高 500px，子级元素高 1000px, 就会产生滚动。这个父级元素就是所谓的 target 元素。

如果再具体一点就是，该元素的 scrollTop 大于 visibility-height 的那个元素。

亲测可用。

如果还不明白，可以直接看 el-backtop 源代码，很简单的。

[hswyxj]

如楼上所说，是自己忽略了重要的对象，例子如下，很明了了

[swuecho]

用 test case 做例子更好一点，现在那个例子没啥用。

https://codepen.io/swuecho/pen/VoQJrB

<template>
 <div ref="scrollTarget" class="test-scroll"  style="height: 100px; overflow: auto">
          <div style="height: 10000px; width: 100%">
            scoll to see the backtop button
            <el-backtop target=".test-scroll">
              <span>test_up_text</span>
            </el-backtop>
          </div>
        </div>
</template>

https://github.com/ElemeFE/element/pull/15541/files#diff-830ca58826df061a18e16c617d854d89R12

[wangfei660]

[w4ctech]

用 test case 做例子更好一点，现在那个例子没啥用。

https://codepen.io/swuecho/pen/VoQJrB

<template>
 <div ref="scrollTarget" class="test-scroll"  style="height: 100px; overflow: auto">
          <div style="height: 10000px; width: 100%">
            scoll to see the backtop button
            <el-backtop target=".test-scroll">
              <span>test_up_text</span>
            </el-backtop>
          </div>
        </div>
</template>

https://github.com/ElemeFE/element/pull/15541/files#diff-830ca58826df061a18e16c617d854d89R12

tnanks