vue 局部回到顶部_VUE回到顶部功能
我们在网页中应该经常可以看到回到顶部这个功能,这个功能也比较简单。那么,我就来记录下自己所知道的方法。
使用scrollTop实现
首先,来简单概括下使用这个方式实现 回到顶部 功能的原理。
根据网页的滚动高度,判断是否显示回到顶部按钮。
点击按钮时,触发回到顶部事件,追求视觉效果的话,可以加入一个定时器。
思路理完之后就是如何用代码实现了
回到顶部
export default {
mounted() {
window.addEventListener("scroll",this.showbtn,true);
},
methods: {
// 显示回到顶部按钮
showbtn(){
let that = this;
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
that.scrollTop = scrollTop
},
/**
* 回到顶部功能实现过程:
* 1. 获取页面当前距离顶部的滚动距离(虽然IE不常用了,但还是需要考虑一下兼容性的)
* 2. 计算出每次向上移动的距离,用负的滚动距离除以5,因为滚动的距离是一个正数,想向上移动就是做一个减法
* 3. 用当前距离加上计算出的距离,然后赋值给当前距离,就可以达到向上移动的效果
* 4. 最后记得在移动到顶部时,清除定时器
*/
backtop(){
var timer = setInterval(function(){
let osTop = document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
this.isTop = true;
if(osTop === 0){
clearInterval(timer);
}
},30)
}
}
}
使用锚点实现
这个方法就比较古老又简陋了,还是在大学时期,刚接触到前端时,老师教过的锚点。
标签是一个很神奇的标签,使用这个标签可以达到返回顶部的效果,但是比较生硬,没有任何过渡效果。
回到顶部 // 这个方法就是为 href 赋值,实现功能
使用 jQuery 实现
能使用原生JS实现的也就能使用jquery实现,只不过我认为为了实现一个小功能,再引入一个框架有点不划算,但如果你是使用jquery写的项目,就可以使用以下的方法实现。
回到顶部
function backtop(minHeight){
// 获取页面最小高度,如果没有传入值就默认600
minHeight ? minHeight = minHeight : minHeight = 600
// 为当前页面绑定滚动事件
$(window).scroll(function() {
// 获取页面滚动高度
let osTop = $(window).scrollTop();
// 如果滚动高度大于页面视口高度,就渐显图标,否则就渐隐图标
if(osTop > minHeight){
$("#backtop").fadeIn(500);
}else {
$("#backtop").fadeOut(500);
}
})
// 定义回到顶部动画
$("#backtop").click(
function(){$('html,body').animate({scrollTop:'0px'},'slow');
)}
vue 局部回到顶部_VUE回到顶部功能相关推荐
- Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
- html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮 现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
- html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器 回到顶部和回到底部在当前的网页中应用时相当广泛的 为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动 那么我们就要 ...
- jq怎么回到顶部和回到尾部_回到学校系列为孩子们提供开放资源
jq怎么回到顶部和回到尾部 全球各地的孩子们都回到学校了! 有没有比免费和开放的教育资源和工具更好的帮助他们成长并充分利用学校的方法? Opensource.com将于9月8日至19日举办为期两周的开 ...
- 蒙文蒙古语翻译软件,实线蒙文翻译页面滚动回到蒙古语翻译顶部
uni-app 实现蒙文翻译页面滚动一定距离出现回到顶部按钮,点击回到蒙古语翻译顶部 回到蒙文翻译顶部按钮html 蒙古语翻译软件体验地址: 安卓:http://tapp.51goods.vip/we ...
- 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://we ...
- uni-app开发:tabar组件与顶部导航栏(功能开发篇)
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
- 深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
- vue 公众号扫描_vue编写微信公众号打开相机功能
vue编写微信公众号打开相机功能,什么都不多说直接上代码 页面布局代码 class="previewer-demo-img" :key="index" :src ...
- vue实现div多选全选功能_怎样为你的 Vue.js 单页应用提速
每日前端夜话第323篇 翻译:疯狂的技术宅 作者:Matthias Sommer 来源:dzone 正文共:1956 字 预计阅读时间:10 分钟 我有一个项目用了 Vue.js 来构建单页应用程序. ...
最新文章
- 【征稿进行时】计算机与智能控制主题征稿,ICCEIC 2020持续征稿中!
- python归一化处理_详解python实现数据归一化处理的方式:(0,1)标准化
- 中石油训练赛 - Block(二维前缀和+思维)
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
- [css] 你知道什么是动态伪类吗?
- 青少年迷恋上短视频 如何防沉迷?
- 字符编码方式及大端小端
- FTP连接报530错误(FTP Error: 530 User cannot log in, home directory inaccessible)
- 女程序员:秃头的富婆不好当
- 中兴Nubia Z5S mini一键ROOT教程 获取ROOT权限
- 【Solr】之倒排索引算法【字典树】2
- Camtasia Studio 录制视频保存为camrec格式后快速导出为AVI格式
- 邵阳学院计算机系主任,湖南教育大平台-湖南省计算机教育年会在邵阳学院召开...
- 市占率第一,是vivo的起点还是终点?
- 实战:战狼2票房数据分析——(2)票房数据构造及保存
- YTU-OJ-多重继承
- 首例 3次IPO:前2次申请科创板、创业板均撤回、第3次改为主板、难圆其说变更保代及券商……
- 笔记本玩cf如何调全屏 笔记本玩cf屏幕两边有黑边怎么办
- 哈佛结构和冯诺依曼结构
- HTML前端静态网页制作
热门文章
- ADS仿真过孔阻抗(via designer)
- 第25版 OpenStack Yoga 已发布:稳定性与创新并重
- C/C++项目源码——数字雨DigitalRain
- 技术分享 | 基于人工势场法的无人机,机间避撞实现
- 排序算法(天勤数据结构高分笔记)
- 数据库系统工程师怎么备考?
- Linux使用“./可执行文件名“运行可执行文件
- 建造者模式(生成器模式)
- ae效果英文版翻译对照表_AE CS6 最全特效中英翻译
- DHT 爬虫的学习记录