vue 网页点击置顶图标缓慢置顶

利用js实现网页置顶缓动效果

子组件
父组件

子组件

<template><div class="content_container_top" v-show="toTopShow"><div@mouseenter="ico = false"@mouseleave="ico = true"@click="scrollToTop"title="返回置顶"><span class="iconfont gotTopicon"></span></div></div>
</template><script>
export default {data() {return {toTopShow: false,scrollTop: '',ico: true,}},methods: {handleScroll() {/* 获取回到顶部的位置元素 .content-container-top */// let dom =document.getElementsByClassName('content-container-top')[0];this.scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTopif (this.scrollTop > 300) {this.toTopShow = true} else {this.toTopShow = false}},scrollToTop() {let _this = thislet top = document.documentElement.scrollTop || document.body.scrollTop// 实现滚动效果const timer = setInterval(() => {document.body.scrollTop = document.documentElement.scrollTop = top -= 50if (top <= 0) {clearInterval(timer)}_this.toTopShow = false}, 10)},},mounted() {this.$nextTick(function () {window.addEventListener('scroll', this.handleScroll, true) // 取消事件冒泡，防止绑定失败})},destroyed() {window.removeEventListener('scroll', this.handleScroll, true) // 取消事件冒泡},
}
</script>
<style>
.content_container_top {line-height: 60px;text-align: center;font-size: 24px !important;font-weight: 900;position: fixed;bottom: 100px;right: 80px;width: 60px;height: 60px;border-radius: 50%;cursor: pointer;transition: 0.3s;color: #070f2d;background-color: #fff;box-shadow: 2px 3px 16px rgb(0 0 0 / 43%);z-index: 9999999;
}
</style>

父组件

引入 import ScrollTop from '@/components/scroll'

在父组件中使用

<ScrollTop> </ScrollTop>

vue 网页点击置顶图标缓慢置顶相关推荐

网页缓慢置顶回到顶部 html、css、js
题目: 网页缓慢置顶回到顶部( html.css.js)...鼠标点击回到顶部的盒子后,网页可先快后缓慢最终回到最初顶部.使用js的定时器实现. 问题描述: 鼠标点击回到顶部的盒子后,网页可先快后缓慢 ...
vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃
h5网页点击按钮,唤醒微信小程序是否可以做? 可以!!,就是有点限制. 通过wx-open-launch-weapp就可以实现,但是限制微信服务号才可以使用.也就是说必须是微信环境下. 文章最下边, ...
【Hexo搭建个人博客】（十三）Next主题中添加首页文章置顶功能及置顶图标
1. 安装插件 npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save 如果 ...
openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息
文章目录 1.写在前面 2. 地图点击事件singleclick 2.1 点击获取经纬度,调用创建mark要素的方法 2.2 实现根据经纬度创建mark要素,设置mark样式,添加到图层,创建要素标题 ...
vue移动端点击电话图标跳转拨打电话功能
vue移动端点击电话图标跳转拨打电话功能项目场景: 最近做app的时候,遇到点击电话小图标跳转到拨打电话功能 ![如图所示](https://img-blog.csdnimg.cn/20210519 ...
android备忘录_苹果备忘录怎样把内容置顶？有置顶功能的备忘录便签
苹果手机是很多人都比较喜欢的一个电子设备,人们之所以喜欢它,除了它精致的外观之外,还有更大一部分原因是因为它的性能非常强大,并且有很多实用的工具软件可以安装,备忘录就是其中一种.苹果备忘录怎样把内容置 ...
Spring+Netty+Vue 网页版聊天应用，仿微信网页版聊天
1:前言最近在学习网络知识,对于java开发来说,Netty是一个非常重要的框架,无论是为了面试还是日常工作中,如RPC框架Dubbo底层其实是用了Netty, 又或者我们的聊天通信功能,都可能有N ...
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...

vue 网页点击置顶图标缓慢置顶

利用js实现网页置顶缓动效果

子组件

父组件

vue 网页点击置顶图标缓慢置顶相关推荐

最新文章

热门文章