element ui 返回顶部不生效问题

最新推荐文章于 2024-05-21 12:20:58 发布

没错就是我哎呀

最新推荐文章于 2024-05-21 12:20:58 发布

阅读量574

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/he3236220/article/details/115228310

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

vue

34 篇文章 1 订阅

订阅专栏

父元素滚动

<template>
    <div class="content">
      <div class="backtop">
        <ul>
          <li>xjais1</li>
          <li>xjais2</li>
          <li>xjais3</li>
          <li>xjais4</li>
          <li>xjais5</li>
          <li>xjais6</li>
          <li>xjais7</li>
          <li>xjais8</li>
          <li>xjais9</li>
          <li>xjais10</li>
          <li>xjais11</li>
          <li>xjais12</li>
          <li>xjais13</li>
          <li>xjais14</li>
          <li>xjais15</li>
          <li>xjais16</li>
          <li>xjais17</li>
          <li>xjais18</li>
          <li>xjais19</li>
          <li>xjais20</li>
          <li>xjais21</li>
          <li>xjais22</li>
          <li>xjais23</li>
          <li>xjais24</li>
          <li>xjais25</li>
          <li>xjais26</li>
          <li>xjais27</li>
          <li>xjais28</li>
          <li>xjais29</li>
          <li>xjais30</li>
          <li>xjais31</li>
          <li>xjais32</li>
          <li>xjais33</li>
          <li>xjais34</li>
          <li>xjais35</li>
          <li>xjais36</li>
          <li>xjais37</li>
          <li>xjais38</li>
          <li>xjais39</li>
          <li>xjais40</li>
          <li>xjais41</li>
          <li>xjais42</li>
          <li>xjais43</li>
          <li>xjais44</li>
          <li>xjais45</li>
          <li>xjais46</li>
          <li>xjais47</li>
          <li>xjais48</li>
          <li>xjais49</li>
          <li>xjais50</li>
          <li>xjais51</li>
          <li>xjais52</li>
          <li>xjais53</li>
          <li>xjais54</li>
          <li>xjais55</li>
          <li>xjais56</li>
          <li>xjais57</li>
          <li>xjais58</li>
          <li>xjais59</li>
          <li>xjais60</li>
          <li>xjais61</li>
          <li>xjais62</li>
          <li>xjais63</li>
          <li>xjais64</li>
          <li>xjais65</li>
          <li>xjais66</li>
          <li>xjais67</li>
        </ul>
      </div>
      <el-backtop target=".content"></el-backtop>
    </div>
</template>  

<style>

.content {
  overflow: scroll;
  height: 100%;
}

</style>

2、子元素回到顶部

target元素及父元素的高度设置为100% height: 100%;
设置滚动 overflow: scroll;

<template>
    <div class="content">
      <div class="backtop">
        <ul>
          <li>xjais1</li>
          <li>xjais2</li>
          <li>xjais3</li>
          <li>xjais4</li>
          <li>xjais5</li>
          <li>xjais6</li>
          <li>xjais7</li>
          <li>xjais8</li>
          <li>xjais9</li>
          <li>xjais10</li>
          <li>xjais11</li>
          <li>xjais12</li>
          <li>xjais13</li>
          <li>xjais14</li>
          <li>xjais15</li>
          <li>xjais16</li>
          <li>xjais17</li>
          <li>xjais18</li>
          <li>xjais19</li>
          <li>xjais20</li>
          <li>xjais21</li>
          <li>xjais22</li>
          <li>xjais23</li>
          <li>xjais24</li>
          <li>xjais25</li>
          <li>xjais26</li>
          <li>xjais27</li>
          <li>xjais28</li>
          <li>xjais29</li>
          <li>xjais30</li>
          <li>xjais31</li>
          <li>xjais32</li>
          <li>xjais33</li>
          <li>xjais34</li>
          <li>xjais35</li>
          <li>xjais36</li>
          <li>xjais37</li>
          <li>xjais38</li>
          <li>xjais39</li>
          <li>xjais40</li>
          <li>xjais41</li>
          <li>xjais42</li>
          <li>xjais43</li>
          <li>xjais44</li>
          <li>xjais45</li>
          <li>xjais46</li>
          <li>xjais47</li>
          <li>xjais48</li>
          <li>xjais49</li>
          <li>xjais50</li>
          <li>xjais51</li>
          <li>xjais52</li>
          <li>xjais53</li>
          <li>xjais54</li>
          <li>xjais55</li>
          <li>xjais56</li>
          <li>xjais57</li>
          <li>xjais58</li>
          <li>xjais59</li>
          <li>xjais60</li>
          <li>xjais61</li>
          <li>xjais62</li>
          <li>xjais63</li>
          <li>xjais64</li>
          <li>xjais65</li>
          <li>xjais66</li>
          <li>xjais67</li>
          <li>xjais68</li>
          <li>xjais69</li>
          <li>xjais70</li>
          <li>xjais71</li>
          <li>xjais72</li>
          <li>xjais73</li>
          <li>xjais74</li>
          <li>xjais75</li>
          <li>xjais76</li>
          <li>xjais77</li>
          <li>xjais78</li>
          <li>xjais79</li>
          <li>xjais80</li>
          <li>xjais81</li>
          <li>xjais82</li>
          <li>xjais83</li>
          <li>xjais84</li>
          <li>xjais85</li>
          <li>xjais86</li>
          <li>xjais87</li>
          <li>xjais88</li>
          <li>xjais89</li>
          <li>xjais90</li>
          <li>xjais91</li>
          <li>xjais92</li>
          <li>xjais93</li>
          <li>xjais94</li>
          <li>xjais95</li>
          <li>xjais96</li>
          <li>xjais97</li>
          <li>xjais98</li>
          <li>xjais99</li>
          <li>xjais100</li>
        </ul>
      </div>
      <el-backtop target=".content .backtop"></el-backtop>
    </div>
</template>  

<style>

.content {
  height: 100%;
}
.backtop {
  overflow: scroll;
  height: 100%;
}
</style>