一般做pc项目都会遇到侧边小按钮点击回到顶部的功能,现在记录一下项目中的实现方法

一、结合动画效果实现

<li class="defa_bt" @click="hddb">
<img src="../static/img/home/bom01.png" alt="">
</li>
methods: {
hddb(){
$("html,body").animate({scrollTop:'0px'},800); //回到顶部
},
}

二、引入elementui实现

<li>
<el-backtop >置顶按钮</el-backtop>
</li>

vue中点按钮回到顶部,和elementUI中置顶按钮的实现的更多相关文章

  1. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  2. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  3. Javascript笔记----实现Page页面右下角置顶按钮.

    从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...

  4. UITableView设置Cell左滑多个按钮(编辑,删除,置顶等)

    一.iOS7不支持cell多个按钮这个时候可以使用一个三方库JZTableViewRowAction,引用类扩展文件并实现其代理方法 JZTableViewRowAction下载地址:http://d ...

  5. vue 移动端项目切换页面,页面置顶

    之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...

  6. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  7. 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  8. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  9. 关于Android PullTorefreshScrollview回到顶部实例

    列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...

  10. Android PullTorefreshScrollview回到顶部

    列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...

随机推荐

  1. ERP是什么呢?

    ERP(Enterprise Resource Planning,企业资源计划)系统,是进行物质资源.资金资源和信息资源集成一体化管理的企业信息管理系统,ERP统领企业全局,为管理层服务,重心在于企业 ...

  2. SecureCRT登录centos日常操作

    ssh登录客户端很多,个人还是习惯使用SecureCRT,非常快捷.简单.针对日常小伙伴经常咨询的常用操作简单记录如下: 建立ssh2连接,比较简单,填写服务器ip及对应的登录用户即可. 登录界面中文 ...

  3. P5658 [CSP-S2019] 括号树

    对于特殊性质fi=i-1,原图是一条链,注意到当前节点是' ('不会产生贡献,')'才会产生,那么思考怎么的计算这个贡献. ()()():每个位置贡献是0,1,0,2,0,3.答案统计出来就是说0,1 ...

  4. JavaWeb完整案例详细步骤

    JavaWeb完整案例详细步骤 废话少说,展示完整案例 代码的业务逻辑图 主要实现功能 基本的CURD.分页查询.条件查询.批量删除 所使用的技术 前端:Vue+Ajax+Elememt-ui 后端: ...

  5. JPA入门学习集合springboot(一)

    1.在pom.xml文件中添加相应依赖 SpringData jpa和数据库MySql <!-- Spring Data JPA 依赖(重要) --> <dependency> ...

  6. MyBatisPlus分页插件在SpringBoot中的使用

    文章目录 1.目录结构 2.新增配置 3.编写测试类 4.测试结果 5.数据库中的表 文件的创建: https://blog.csdn.net/weixin_43304253/article/deta ...

  7. python face_recognition安装及各种应用

    1.安装 首先,必须提前安装cmake.numpy.dlib,其中,由于博主所用的python版本是3.6.4(为了防止不兼容,所以用之前的版本),只能安装19.7.0及之前版本的dlib,所以直接p ...

  8. SQL--插入单引号值

    sql语句中插入单引号的值需要多写一个单引号进行转义 例如:插入一个值为student' name的值 update table set name='student'' name'

  9. nginx 客户端返回499的错误码

    我们服务器客户端一直有返回错误码499的日志,以前觉得比例不高,就没有仔细查过,最近有领导问这个问题,为什么耗时只有0.0几秒,为啥还499了?最近几天就把这个问题跟踪定位了一下,这里做个记录 网络架 ...

  10. 表驱动法在STM32中的应用

    1.概念 所谓表驱动法(Table-Driven Approach)简而言之就是用查表的方法获取数据.此处的"表"通常为数组,但可视为数据库的一种体现.根据字典中的部首检字表查找读 ...