Vue实现在页面上添加返回顶部按钮(按钮固定在页面右下角)

2023-11-14

  1. 从网站上下载按钮图片:
    我在图精灵上下载图片到项目src文件夹下的assets文件夹
    并命名为topButton.png
    可以用本地的图片编辑软件(如画图)将按钮图片设置为像素50*50
    在这里插入图片描述

  2. 在App.vue文件夹下引入图片

//为click事件设置处理函数(点击回到顶部方法)
//v-if(条件渲染),绑定的值btnFlag为true的时候显示该<img>元素,为false则删除
<img id='upbutton' v-if='btnFlag src="../assets/topButton.png" @click="backTop">
  1. 在样式表里添加图片固定样式
<style scoped>
     #upbutton {
   
   /*  设置图片相对于浏览器窗口固定*/
        position: fixed;
    /* 设置图片相对于浏览器的位置
    距离右边180px,底部20px,宽度50px
*/
        right :180
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue实现在页面上添加返回顶部按钮(按钮固定在页面右下角) 的相关文章

随机推荐

  • CSTrack: Rethinking the competition between detection and ReID in Multi-Object Tracking

    CSTrack Rethinking the competition between detection and ReID in Multi Object Tracking 论文链接 https arxiv org abs 2010 121
  • 什么是标称属性?什么是二元属性?什么是序数属性?

    什么是属性 属性是一个数据字段 表示数据对象的一个特征 一个属性的类型由该属性可能具有的值的集合决定 标称属性 标称意味着 与名称有关 标称属性的值是一些符号或者是事物的名称 每个值代表某种类别 编码或者状态 尽管标称属性有数值 但是不能把
  • 全面剖析《自己动手写操作系统》第四章--FAT12文件系统

    一 FAT12 FAT12是DOS时代就开始使用的文件系统 File System 直到现在仍然在软盘上使用 FAT12软盘的被格式化后为 有两个磁头 每个磁头80个柱面 磁道 每个柱面有18个扇区 每个扇区512个字节空间 所以标准软盘的
  • Android Google Maps 开始

    由于工作需要 最近对Android的各大地图进行了试用 其中有Google地图 百度地图 高德地图 还有开源的OSM 在使用Google地图的时候 官网流程写的非常清楚 但是其中也遇到一些问题 这里我将我的流程写出来 方便他人 这个是官方安
  • 【C++】Boost::circular_buffer——循环缓冲区

    参考 Boost circular buffer 循环缓冲区 一 概述 Boost Circular buffer维护了一块连续内存块作为缓存区 当缓存区内的数据存满时 继续存入数据就覆盖掉旧的数据 它是一个与STL兼容的容器 类似于 st
  • golang json性能分析详解

    原文地址 https www jb51 net article 135264 htm json格式可以算我们日常最常用的序列化格式之一了 Go语言作为一个由Google开发 号称互联网的C语言的语言 自然也对JSON格式支持很好 下面这篇文
  • 基于决策树算法构建员工离职预测模型

    1 1背景介绍 每一个公司都会面临着人才管理的问题 而许多企业在发展中辛苦培养发展起来的技术人才 却不断流失 那么 如何调整公司管理制度 才能最大化保证员工的留任与能力发展 从而促进公司业务持续增长呢 本课程介绍收集了某公司人才流失各方面的
  • GLSL #define GL_SPIRV 100说明

    GLSL define GL SPIRV 100说明 版权 hankern https blog csdn net hankern article details 90690297 Standard Portable Intermediat
  • 【学习笔记】POST和GET的区别

    吃水不忘挖井人系列之 https mp weixin qq com s N2GStE2ksWUO yzIETTcQQ 在开撸之前吗 让我们先看一下标准答案长什么样子 w3school GET 对比 POST 标准答案很美好 但是在面试的时候
  • Chrome 快捷键大全

    从2013年开始使用 Chrome 浏览器 简洁好用 以前是用来专门科学上网 后来工作发现 Chrome 是开发必备 今天整理了一下Chrome的快捷键 有些挺常用 熟悉掌握快捷键 甚至不要鼠标就可以装逼了 标签和窗口 同个窗口新建标签 C
  • 【Linux】软件安装&卸载

    目录 1 notepad plus plus 2 notepadqq 3 pycharm 4 Anaconda 5 vscode 6 android ndk 7 搜狗输入法 8 卸载vmware 9 GIMP 10 git 11 llvm
  • JAVA 写Excel附件 每天定时发送邮件

    JAVA 写Excel附件 每天定时发送邮件 http hi baidu com star850323 blog item 63c5750f520e05ec37d1228d html http hi baidu com star850323
  • HBuilderX 最新安装使用教程,附详细图解,持续更新

    HBuilderX 安装使用教程 HBuilderX是HBuilder的升级版 它是是DCloud 数字天堂 推出为前端开发者服务的通用IDE 或者称为编辑器 HBuilderX的功能从下图可以直观的了解个大概 官网地址 https ask
  • Java基础总结之各个模块重要知识点

    一 对象模块 一 初始化 1 对this super 构造函数 构造代码块 静态代码块总结 this 代表当前对象 也就是所在函数所属对象的引用 this对象后面加 调用的是对象的成员变量和方法 this say this对象后面加 调用的
  • 毕业设计-基于机器视觉的甘蔗茎秆识别方法-OpenCV

    目录 前言 课题背景和意义 实现技术思路 一 总体思路 二 图像处理 三 甘蔗识别 四 结 语 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几
  • OpenCV中的图像处理

    颜色空间转换 1 基本读写操作 import cv2 import numpy as np img cv2 imread MyPic png cv2 IMREAD GRAYSCALE print img shape cv2 imwrite
  • winusb —— 不再为你的usb设备编写驱动

    blog csdn net lanmanck 曾几何时我们找工作还发现有个驱动工程师职位 月薪也不低 没接触过的人代码压根看不懂 今天可好了 如果不太追求差异化 不用驱动也能让系统与USB设备通信了 Linux就不说了 libusb很好用
  • nginx服务器启动、停止、重启

    启动nginx nginx c path to nginx conf 关闭nginx nginx s stop 快速停止nginx quit 完整有序的停止nginx 重启nginx nginx s reload 修改配置后重新加载生效 n
  • org.springframework.validation.BindException: org.springframework.

    错误信息 org springframework validation BindException org springframework validation BeanPropertyBindingResult 2 errors Fiel
  • Vue实现在页面上添加返回顶部按钮(按钮固定在页面右下角)

    从网站上下载按钮图片 我在图精灵上下载图片到项目src文件夹下的assets文件夹 并命名为topButton png 可以用本地的图片编辑软件 如画图 将按钮图片设置为像素50 50 在App vue文件夹下引入图片 为click事件设置