elementUI之模拟goTop组件

最近项目遇到一个问题，需要在个别出现较高垂直滚动条的页面，加入一个返回顶部的小功能。虽然利用许多Jquery插件可以实现，但是elementUI的官网本身就有一个goTop组件（奈何该组件没有开放），效果还不错，为了页面风格的一致性，准备对该组件进行了简单模拟，恰好CSDN已有一位前辈对此进行了封装（vue+element-ui 回到顶部组件），而且封装的相对完善，在此对其根据个人需求进行二次封装并添加演示demo。

1.官网goTop组件效果图 VS 实际模拟组件效果图

2.javascript & stylesheet

kt-scroll-top.js

var html = `<transition name="el-fade-in"><div class="kt-scroll-top" @click="scrollToTop" v-show="toTopShow" ref="scrollTopWrapper"><i class="el-icon-caret-top"></i></div></transition>
`;Vue.component('kt-scroll-top', {template: html,data() {return {toTopShow: false,scrollTop: 0}},props: {bodyScroll: {type: Boolean,default: true}},methods: {handleScroll() {this.scrollTop = this.bodyScroll ? window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop : this.$refs['scrollTopWrapper'].parentNode.scrollTop;this.toTopShow = this.scrollTop > 300;},scrollToTop() {let timer = null, _this = this, dom = this.$refs['scrollTopWrapper'].parentNode;cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn() {if (_this.scrollTop > 5000) {_this.scrollTop -= 1000;if (_this.bodyScroll) {document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;} else {dom.scrollTop = _this.scrollTop;}timer = requestAnimationFrame(fn);} else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {_this.scrollTop -= 500;if (_this.bodyScroll) {document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;} else {dom.scrollTop = _this.scrollTop;}timer = requestAnimationFrame(fn);} else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {_this.scrollTop -= 100;if (_this.bodyScroll) {document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;} else {dom.scrollTop = _this.scrollTop;}timer = requestAnimationFrame(fn);} else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {_this.scrollTop -= 10;if (_this.bodyScroll) {document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;} else {dom.scrollTop = _this.scrollTop;}timer = requestAnimationFrame(fn);} else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {_this.scrollTop -= 5;if (_this.bodyScroll) {document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;} else {dom.scrollTop = _this.scrollTop;}timer = requestAnimationFrame(fn);} else {cancelAnimationFrame(timer);_this.toTopShow = false;}});}},mounted() {this.$nextTick(function () {window.addEventListener('scroll', this.handleScroll, true);});},destroyed() {window.addEventListener('scroll', this.handleScroll, true);}
});

kt-scroll-top.css

.kt-scroll-top {background-color: #fff;position: fixed;right: 100px;bottom: 150px;width: 40px;height: 40px;size: 40px;border-radius: 20px;cursor: pointer;transition: .3s;box-shadow: 0 0 6px rgba(0,0,0,.12);z-index: 5;
}.kt-scroll-top .el-icon-caret-top {color: #409eff;display: block;line-height: 40px;text-align: center;font-size: 18px;
}.kt-scroll-top:hover {opacity: 1;
}

3.演示html

kt-scroll-top-demo.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>KT-SCROLL-TOP-DEMO</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- kt-scroll-top --><script src="./kt-scroll-top.js"></script><link rel="stylesheet" href="./kt-scroll-top.css"><style>.content-wrapper {height: 300px;overflow: auto;width: 80%;margin: 0 auto;border: 3px solid red;}.content-wrapper h1 {height: 60px;line-height: 60px;text-align: center;font-size: 60px;font-weight: bolder;}</style>
</head><body><div id="app" style="height: 2000px"><div class="content-wrapper"><h1>滑动右侧滚动条出现scrollTop图标!</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 局部goTop：注意父节点要能出现滚动条 --><kt-scroll-top style="top: 240px;right: 200px;" :body-scroll="false"></kt-scroll-top></div><!-- 全局goTop --><kt-scroll-top></kt-scroll-top></div></body>
<script>var APP = new Vue({el: '#app'})
</script></html>

PS：完整demo以图包方式存放，右键(演示demo的gif动图 ) -> 图片另存为(xxx.gif) -> 右键重命名(xxx.rar) -> 右键解压即可。

elementUI之模拟goTop组件相关推荐

Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
elementUI的DatePicker+DateTimePicker组件的自定义日期禁用
elementUI的DatePicker+DateTimePicker组件的自定义日期禁用
elementUI多选框组件：多选数组，取值问题
elementUI多选框组件:多选数组,取值问题效果图: <templete>部分:  <!-- 已发布职位list列表 --& ...
element-ui 左侧边栏el-menu组件：路由跳转 - 案例篇
有顶部导航 .还有侧边栏导航:如何实现路由的设置.跳转.高亮? A. 顶部导航 · Hhtml 代码如下:(含高亮设置) <el-menu:default-active="$route ...
element-ui 框架的checkbox组件：点击事件与选中判断 - 代码篇
vue + element-ui 框架的checkbox组件:点击事件与选中判断代码如下: html部分  <div class="btn ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
Unity中使用模板测试模拟Mask组件效果
本文分享Unity中使用模板测试模拟Mask组件效果在上一篇文章中, 我们分享了模板测试的基础知识, 在今天的分享中, 我们会尝试使用模板测试来模拟遮罩效果. Unity中使用模板测试模拟Mask组 ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...
使用ElementUi的tabs切换组件时下拉选择器出现破板情况
解决ElementUi下拉框的破板情况使用ElementUi的tabs切换组件时下拉选择器出现破板情况问题原因解决问题使用ElementUi的tabs切换组件时下拉选择器出现破板情况项目中使 ...
element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码
element-ui 去掉谷歌浏览器el-input组件自动填充账号密码效果图一.主要代码之el-input 二.主要代码之input 1.使用element中el-input自带的属性auto- ...

elementUI之模拟goTop组件

1.官网goTop组件效果图 VS 实际模拟组件效果图

2.javascript & stylesheet

3.演示html

elementUI之模拟goTop组件相关推荐

最新文章

热门文章