一般做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. PHP实践项目【1】:注册登录页面

    在我们这个项目里面,一共用到了5个php文件,他们分别是: login.php 登录页面 logincheck.php 登录检测php文件 register.php 新用户注册页面 regcheck. ...

  2. useEffect 和 useLayoutEffect浅析

    执行时期的区别 useEffect 回调函数的执行时期 useEffect为异步执行,执行时期为 触发状态更新(如:setState,forceUpdate) React渲染函数执行(render) ...

  3. 用copyof来复制数组

    public static void main(String[] args) { //Arrays.copyOf将数组复制到另一个数组,截断.扩容 String[] a={"1", ...

  4. Hadoop集群简单入门

    Hadoop集群搭建 自己配置Hadoop的话太过复杂了,因为自己着急学习,就使用了黑马的快照.如果小伙伴们也想的话可以直接看黑马的课程,快照的话关注黑马程序员公众号,输入Hadoop就能获取资料,到 ...

  5. SQL分层查询

    数据中可能存在层次关系,本文章主要介绍查询这种关系的实例.会大量使用递归式 CTE. Emps 表中 EName 员工和 MGR 上级之间的关系如下: 每个上级也同样是员工,主管和员工之间为父子关系. ...

  6. echarts标题(title)配置

    var option = {         //标题         title : {             show:true,//显示策略,默认值true,可选为:true(显示) | fa ...

  7. Azure DevOps Server 设置项目管理用户,用户组

    一,引言 Azure DevOps Server 搭建完成后,关于如何进行项目管理,项目成员管理等,我们接着上一篇文章,继续讲解 Azure DevOps Server 的用户,用户组.首先,我们需要 ...

  8. 一次SpringBoot版本升级,引发的血案

    前言 最近项目组升级了SpringBoot版本,由之前的2.0.4升级到最新版本2.7.5,却引出了一个大Bug. 到底是怎么回事呢? 1.案发现场 有一天,项目组的同事反馈给我说,我之前有个接口在新 ...

  9. 嵌入式-C语言基础:函数指针

    定义函数地址:如果在程序中定义了一个函数,那么在编译的时候,编译系统为函数代码分配一段存储空间,这段存储空间的起始地址(也叫入口地址)称为这个函数的地址. 和数组一样,数组名代表地址,而函数名表示函数 ...

  10. perl遍历哈希的所有健和值

    my %h=("001",{name,"李白",age,"18",height,"185",weight,"6 ...