页面滚动到一定位置时,出现回到顶部按钮 代码如下

HTML
<div class="footer">
<div class="gotop" v-show="gotop" @click="toTop">Top</div>
</div>

CSS

.footer .gotop {
text-align: center;
position: fixed;
right: 50px;
bottom: 30px;
cursor: pointer;
padding: 10px;
border-radius: 50%;
background: white;
color: #000000;
}
JS
export default {
data() {
return {
gotop: false
};
},
mounted() {
  // 此处true需要加上,不加滚动事件可能绑定不成功
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
handleScroll() {
       let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
},
toTop() { let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现滚动效果
const timeTop = setInterval(() => {
document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
}
}
}

谷歌,火狐,Edge中测试通过,

直接回到顶部

// 滚动到app所在的位置(无滚动效果),如app在顶部,即回到顶部

document.getElementById("app").scrollIntoView();


Vue中点击按钮回到顶部(滚动效果)的更多相关文章

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

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

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

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

  3. vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载    html2canvas    npm install html2canvas  --save 引用 : import htm ...

  4. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  5. 重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部

    1.监听按钮点击   2.判断是否是点击的同一个按钮(记录上次点击的按钮)   3.当重复点击相同按钮时,需要获取当前按钮对应控制器刷新界面      3.1 判断是否重复点击按钮,代码写在哪里?   ...

  6. JS——BOM操作(点击按钮返回顶部案例:scrollTop的用法)

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  8. vue中点按钮回到顶部,和elementUI中置顶按钮的实现

    一般做pc项目都会遇到侧边小按钮点击回到顶部的功能,现在记录一下项目中的实现方法 一.结合动画效果实现 <li class="defa_bt" @click="hd ...

  9. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  10. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

随机推荐

  1. CF1822F Gardening Friends

    题目链接 题解 知识点:树的直径,枚举. 考虑一个结论:树上任意点的最远点一定是树的直径的端点. 那么对于一个根节点,只要知道了树的直径,那么我们就可以立即得到最远距离,即乘 \(k\) 树的价值. ...

  2. NC24953 [USACO 2008 Jan G]Cell Phone Network

    题目链接 题目 题目描述 Farmer John has decided to give each of his cows a cell phone in hopes to encourage the ...

  3. CoreDNS笔记

    因为项目的原因需要在客户端启动DNS服务,拦截本机DNS请求,考察了一下开源的DNS Server项目,适合在Windows下使用的只有CoreDNS. 说明 CoreDNS的项目地址 https:/ ...

  4. Python2升级到Python3

    操作系统环境:CentOS Linux release 7.4.1708 (Core). 系统默认Python版本为2.7. 升级前的版本信息: [root@cch-spider-web1 ~]# l ...

  5. 【LeetCode二叉树#05】平衡二叉树

    力扣题目链接(opens new window)](https://leetcode.cn/problems/balanced-binary-tree/) 给定一个二叉树,判断它是否是高度平衡的二叉树 ...

  6. 浅谈 rxgo 在项目中的使用方式

    项目中使用到了 RxGo ,感觉现有的处理方式有一定的优势,当然也有一定的有劣势,遂记录下来,免得自己忘记. 本文介绍的只是 rxgo 的一种方式而已,如果你有不错的使用方式,请不吝赐教,谢谢. 对 ...

  7. 【Azure 事件中心】China Azure上是否有Kafka服务简答

    问题描述 China Azure 上是否有Kakfa服务可以使用呢? 问题回答 China Azure并没有专门的Kafka服务,但是可以使用Azure Event Hub. 创建标准版及以上的Eve ...

  8. go程序在mac下的交叉编译

    主页 微信公众号:密码应用技术实战 博客园首页:https://www.cnblogs.com/informatics/ 背景 go语言的一大优势就是跨平台,go语言是编译型语言,与Java.C#等语 ...

  9. 基于STM32F407MAC与DP83848实现以太网通讯一(STM32以太网(ETH)外设)

    STM32F4xx 可以通过以太网按照 IEEE 802.3-2002 标准发送和接收数据.支持与外部物理层 (PHY) 相连的两个工业标准接口:默认情况下使用的介质独立接口 (MII)(在 IEEE ...

  10. typeorm-model-generator 数据库映射Model 命令 - nest

    typeorm-model-generator 数据库映射Model 命令 NestJs中的控制器.路由.Get.Post方法参数装饰器 https://blog.csdn.net/urwddd/ar ...