一般做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. 引入Wukong让你的系统瞬间具备IOC能力

    [Github源码] 本文重点要说的是如何通过引入Wukong第三方包让自己的系统能够拥有IOC容器能力,但在具体讲解步骤之前,还是想先简单的介绍一下什么是IOC以及它存在的意义:同时也就能清楚Wuk ...

  2. 从SpringBoot启动,阅读源码设计

    目录 一.背景说明 二.SpringBoot工程 三.应用上下文 四.资源加载 五.应用环境 六.Bean对象 七.Tomcat服务 八.事件模型 九.配置加载 十.数据库集成 十一.参考源码 服务启 ...

  3. 华为设备配置telnet远程登陆命令

    user-interface vty 0 4 进入0~4前五个的VTY用户界面进行整体配置 authentication-mode password 设置验证方式为密码 user privilege ...

  4. C语言二叉树遍历及路径查找

    #include<iostream> #include<stdio.h> #include<math.h> #include<malloc.h> usi ...

  5. 11.pygame飞机大战游戏整体代码

    主程序 # -*- coding: utf-8 -*- # @Time: 2022/5/20 22:26 # @Author: LiQi # @Describe: 主程序 import pygame ...

  6. .Net core--创建一个单元测试xUnit

    创建一个xUnit项目  webApi.test 创建之后会有一个默认的[Fact]  (测试的标准格式) [Fact] public void TestEqual() { int a = 10, b ...

  7. 论文笔记 - SIMILAR: Submodular Information Measures Based Active Learning In Realistic Scenarios

    motivation Active Learning 存在的重要问题:现实数据极度不平衡,有许多类别很少见(rare),又有很多类别是冗余的(redundancy),又有些数据是 OOD 的(out- ...

  8. JUC学习笔记——共享模型之管程

    JUC学习笔记--共享模型之管程 在本系列内容中我们会对JUC做一个系统的学习,本片将会介绍JUC的管程部分 我们会分为以下几部分进行介绍: 共享问题 共享问题解决方案 线程安全分析 Monitor ...

  9. 优秀的Kafka GUI客户端、可视化管理工具、监控工具

    想要查看Topic里的消息却找不到软件,想要查看或更新Broker.Topic配置,想要监控Broker服务器状态?试试下面的Kafka GUI工具--Kafka Assistant 官网地址:htt ...

  10. SQLSever数据库基本操作

    一.SQLSever数据库基本操作 1.创建数据库 use master if exists(select * from sysdatabases where name='SMDB') drop da ...