Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】

自定义backTop回到顶部按钮

提示：本文主要解决elemnt-ui的Backtop组件失效问题以及自定义一个回到顶部按钮两部分，请按需查看。

---

---

前言

提示：本文会进行详细讲解，代码在后面自取

例如：我相信有不少的小伙伴在使用element-ui组件进行开发时，可能或多或少会遇到某些组件的失效问题或者坑。不过没瓜系，因为，至少这个坑我已经帮你们踩了，你们只管迈过去，我伟大吧，哈哈哈

提示：以下是正经内容，请放心观看

一、Element-ui 回到顶部组件不显示？（解决他！）

问题还原

Element-ui官网自定义回到顶部插件内容如下，但是复制到自己的代码里没有显示。

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

根据渲染出的代码排查，我们可以只看到了上面的描述字，没看到别的元素被渲染出来，下滑之后还是没发现（注意：这里可以下滑看看，一定要下滑距离超过一页）

查了博客，别的达瓦里氏是这样说到的

问题解决

解决一：backtop组件代码不能放在尾部，要放在最外层的div里的第一个

放在第一个之后，一定先刷新页面，然后下滑试试，在页面的右下角，如果显示了那就不用管了，你可以一键三连退出了。

如果，到这里，依旧还是没显示，那你应该跟我一样，我们也按照我查找到的资料说，要放在了最外层容器下，我正好是最外层最顶部，这时候可以看看控制台，我没猜错的话，你的控制台跟我报的一样的错

好好好，不要怕，这不还有方法二吗。。

解决二：删除[target=“.page-component__scroll .el-scrollbar__wrap”]字段

just like me ，还是先刷新页面，然后下滑，快去试试吧

如果不出意外，那你就会向我一样，右下角显示个这玩意儿

好吧，你要是觉得不好看的话，官方还有另外一套方案可以供你使用，我已经去掉报错代码了，直接复制粘贴就行

 <el-backtop :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>

最终效果如下：

二、自定义BackTop组件

其实到这里，不管你是上面的elemnt组件没恢复还是跟我一样嫌弃原来的组件太小，不明显，又不想改原来的组件，没关系，自己写一个：主要是自定义程度高，甚至可以封装起来以后直接用

我写的长这样，更喜欢这个就往下C+V吧！如果不喜欢我写的样式自己修改样式代码即可

视图代码

代码如下：不过要记得看提示哈，很重要，不然会失效

<template>
  	<!-- 一定要记得在最外层容器添加@scroll="handleScroll"监听事件，否则不生效 -->
  	<div @scroll="handleScroll">
  	<!-- 从这里复制即可，不要忘了上面的提示，这里记得在data里面添加showButton属性哈 -->
		<button class="backtotop" v-show="showButton" @click="scrollToTop">
			<i class="el-icon-upload2" style="font-size: 20px"></i>
		 	UP
		</button>
	</div>
</template>

样式代码css

/*按钮样式*/
.backtotop {
  position: fixed;
  bottom: 35px;
  right: 25px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer; //手型
  z-index: 9999999;层级
  width: 65px;
  height: 65px;
  border-radius: 10px;//圆角
  text-align: center;
  font-weight: bold;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.55); //阴影效果，水平/垂直/模糊半径/(Rgb颜色+透明度)
  animation: fadeIn 0.5s ease-in; 
}
/*动画效果*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*鼠标悬停效果*/
.backtotop:hover {
  background-color: #0056b3;//鼠标悬停效果
}

逻辑代码

//这里千万别忘了在data中添加showButton属性
 data() {
    return {
    	showButton: false,//回到顶部按钮
    }
 }, 
// 从这里开始复制
//-------------------------------------------------------------------------------------
//注册滑动监听
mounted() {
	window.addEventListener('scroll', this.handleScroll)
},
// 销毁组件前取消监听
beforeDestroy() {
	window.removeEventListener('scroll', this.handleScroll)
},
 methods: {
 // 监听页面滚动事件
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop
      // 在这里你可以根据页面滚动的位置来决定是否显示回到顶部按钮
      // 这里假设滚动超过 600px 时显示按钮
      if (scrollTop > 600) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    },
    scrollToTop() {
      // 点击回到顶部按钮时触发的方法
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 平滑滚动到顶部
      });
    },
},

实际效果演示

下滑页面到设置距离后，鼠标悬浮按钮变暗，点击后，页面滚动回到顶部，按钮消失。

总结一下

提示：如果出现问题记得看注释提示

到这里，我们element-ui的backtop组件OK了，自定义的组件也OK了，看你们喜欢哪个，需要哪个就用哪个，有问题可以下方留言或者直接私信我哦
瑞思拜~