一般做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. SQL Server复制的阶梯

    SQL Server复制的阶梯:第1级 - SQL Server复制简介 本翻译文章来自作者:Sebastian Meine, 2012年12月26日 该系列 本文是Stairway系列的一部分:SQ ...

  2. GCN的原理及其代码实现

    图数据的特征性质 图像数据是一种特殊的图数据,图像数据是标准的2D网格结构图数据.图像数据的CNN卷积神经网络算法不能直接用在图数据上,原因是图数据具有以下特殊性. 节点分布不均匀:图像数据及网格数据 ...

  3. 设计模式之观察者模式_C++

    1 // ADBHelper.cpp : This file contains the 'main' function. Program execution begins and ends there ...

  4. Docker | 使用dockerfile生成镜像,清理docker空间

    用dockerfile生成镜像并挂载数据卷 编写dockerfile文件 创建dockerfile01 文件 # 基础镜像 FROM centos VOLUME ["volume01&quo ...

  5. 洛谷 P5607 [Ynoi2013] 无力回天 NOI2017

    人生第一道Ynoi,开心 Description https://www.luogu.com.cn/problem/P5607 Solution 拿到这个题,看了一下,发现询问要求最大异或和,怎么办? ...

  6. Windows活动目录_初识

    计算机组织形式 工作组(用户本地登录时构造SID进行权限分配): 域(统一身份验证与管理) 域注意事项 实体:域控.域用户.加入域的机子. 依赖的服务:netlogon服务 强制刷新组策略gpupda ...

  7. LeetCode------合并两个有序数组(4)【数组】

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/merge-sorted-array 1.题目 给你两个按 非递减顺序 排列的整数数组 nums ...

  8. Docker之介绍与安装

    Docker 说明 本章,我们主要从Docker简介.Docker中几个核心概念和Docker安装这几个方面对Docker进行介绍! 1. Docker 简介 1.1. 什么是 Docker Dock ...

  9. Charles基本功能

    Windows: 运行安装应用程序以在程序菜单中安装 Charles. Mac OS X: 通过双击解压缩下载文件,然后将 Charles 应用程序复制到 Applications 目录中. Linu ...

  10. 什么是ForkJoin?看这一篇就能掌握!

    摘要:ForkJoin是由JDK1.7之后提供的多线程并发处理框架. 本文分享自华为云社区<[高并发]什么是ForkJoin?看这一篇就够了!>,作者: 冰 河. 在JDK中,提供了这样一 ...