Element Backtop回到顶部的具体使用


Posted in Javascript onJuly 27, 2020

组件— 回到顶部

基础用法

Element Backtop回到顶部的具体使用

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

自定义显示内容

Element Backtop回到顶部的具体使用

<template>
 Scroll down to see the bottom-right button.
 <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :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>
</template>

Attributes

Element Backtop回到顶部的具体使用Events

Element Backtop回到顶部的具体使用

关于element-ui el-backtop返回顶部组件无效问题

el-backtop绑定的盒子,需要一个滚动样式:overflow-y: scroll;

<template>
 <div id="app">
  <router-view />
  // 绑定app盒子
  <el-backtop target="#app" :visibility-height="100"></el-backtop>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {};
 },
 methods: {},
 mounted() {}
};
</script>

<style>
#app {
 font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 width: 100%;
 height: 100%;
 /* 这里给app一个滚动效果 */
 overflow-y: scroll;
}
</style>

到此这篇关于Element Backtop回到顶部的具体使用的文章就介绍到这了,更多相关Element Backtop回到顶部内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
办公室前台岗位职责
2014/01/04 职场文书
捐款倡议书
2014/04/14 职场文书
2014年党课学习材料
2014/05/11 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
大队委员竞选稿
2015/11/20 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
我收到了德劲DE1107
2022/04/05 无线电