element-ui 回到顶部组件el-backtop

ゝ一世哀愁。 2021-08-20 02:14 873阅读 0赞

参考：

1，[https://blog.csdn.net/weixin\_42598901/article/details/99674145][https_blog.csdn.net_weixin_42598901_article_details_99674145]

2，[https://www.cnblogs.com/rogerwu/p/9543563.html][https_www.cnblogs.com_rogerwu_p_9543563.html]

3，[https://blog.csdn.net/qq\_36070288/article/details/84765139][https_blog.csdn.net_qq_36070288_article_details_84765139]

4，[https://www.cnblogs.com/chendada/p/11238746.html][https_www.cnblogs.com_chendada_p_11238746.html]

5，[https://blog.csdn.net/qq348843576/article/details/103261602][https_blog.csdn.net_qq348843576_article_details_103261602]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

三行代码就足够。如果报错，就在headContainer类的样式中加上这个2个属性：height: 100vh;overflow-x: hidden;

target要指向触发滚动的对象

<el-backtop target=".headContainer">
       <i class="el-icon-caret-top"></i>
    </el-backtop>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[https_blog.csdn.net_weixin_42598901_article_details_99674145]: https://blog.csdn.net/weixin_42598901/article/details/99674145
[https_www.cnblogs.com_rogerwu_p_9543563.html]: https://www.cnblogs.com/rogerwu/p/9543563.html
[https_blog.csdn.net_qq_36070288_article_details_84765139]: https://blog.csdn.net/qq_36070288/article/details/84765139
[https_www.cnblogs.com_chendada_p_11238746.html]: https://www.cnblogs.com/chendada/p/11238746.html
[https_blog.csdn.net_qq348843576_article_details_103261602]: https://blog.csdn.net/qq348843576/article/details/103261602
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/0b42b6de27134034b3d75cf790b5948a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/5a955aff4f614e31bcaeb0ba38fcb82c.png