关于 element 的 backToTop

下面是一段完整的小demo。

效果图示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><script src="https://cdn.jsdelivr.net/npm/vue"></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>
</head><style>* {box-sizing: border-box;}html,body {margin: 0;padding: 0;}.wraper {height: 100vh;border: 4px solid red;height: 500px;overflow: hidden;overflow-x: hidden;overflow-y: scroll;}.back-ball {background-color: tomato;color: #fff;border-radius: 22px;padding: 10px;}
</style><body><div class="wraper"><template>Scroll down to see the bottom-right button.<el-backtop target=".wraper"><div class="back-ball">回到顶部</div></el-backtop></template><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1><h1>滚动内容部分</h1></div>
</body>
<script>var vm = new Vue({el: '.wraper',data: {}})
</script></html>

** 注意： ** target挂载点需要是一个滚动区域（设置高度。overflow-y：scroll）

转载于:https://www.cnblogs.com/niluiquhz/p/11298281.html

关于 element 的 backToTop相关推荐

Cannot locate BeanDefinitionParser for element [scoped-proxy]
指定使用 CGLIB 而不使用 JDK 生成代理对象:注意:此两个标签必须同时出现,不然会报:Cannot locate BeanDefinitionParser for element [scope ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
75. Find Peak Element 【medium】
75. Find Peak Element [medium] There is an integer array which has the following features: The numbe ...
Element el-switch 组件样式修改将文字显示到组件内
Element el-switch 现在的样式无法将文字显示到组件内 ,需要自己修改样式.具体如下 <el-switch:disabled="s==item.select.length ...
关于element的select多选选择器，数据回显的问题
关于element的select多选,数据回显的问题在工作中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显.在网上 ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue...
原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue [源码下载] 背水一战 ...

关于 element 的 backToTop

下面是一段完整的小demo。

关于 element 的 backToTop相关推荐

最新文章

热门文章