vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法:
Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true
使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果。
<body style="height:2000px;">
<div id="target"></div>
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</body>
2. vue 中滚动条滚到一定距离后,显示『回到顶部』按钮;
(1)监听滚动事件
利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
然后在方法中,添加这个 scrollToTop 方法:
scrollToTop() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
控制台打印结果:
(2) 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false;
scrollToTop(el) {
let topBtn = document.getElementById('to-top-btn');
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let browserHeight = window.outerHeight;
if (scrollTop > browserHeight) {
topBtn.style.display = 'block';
} else {
topBtn.style.display = 'none';
}
}
(3) 离开该页面需要移除这个监听的事件,不然会报错;
destroyed () {
window.removeEventListener('scroll', this.scrollToTop);
}
vue中回到顶部的更多相关文章
- Vue.之.回到顶部
Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...
- vue开发 回到顶部操作
第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- CSS实现回到顶部图片hover后改变效果
任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...
- vue中的回到顶部
<template> <div class="main"> <div class="content">灰色部分是内容部分&l ...
- vue 中<vue-scroll >滚动条回到顶部
今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- vue回到顶部组件
html <template> <a href="javascript:;" class="toTop" @click="backT ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
随机推荐
- 51Nod 1095 Anigram单词 | Hash
Input示例 5 add dad bad cad did 3 add cac dda Output示例 1 0 2 题意:一系列字符串,查询字符串S,能通过其他字符串交换串内字符顺序得到的字符串个数 ...
- python学习笔记(四)之分支和循环
python中比较操作符有: > >= < <= == != 这些操作符返回True或False 1 >>> 1 < 3 2 True 3 >&g ...
- html+js+node实现五子棋线上对战,五子棋最简易算法
首先附上我的github地址,https://github.com/jiangzhenfei/five,线上实例:http://47.93.103.19:5900/client/ 线上实例,你可以随意 ...
- PKUWC 2019 自闭记
PKUWC 2019 自闭记 Day -1 考前天天在隔壁的物竞教室划水(雀魂,能和吉老师一起玩的游戏都是好游戏),没有做题. Day 0 早上8:16的高铁,到广州南居然要6个小时...不知道福州和 ...
- skb管理函数之alloc_skb、dev_alloc_skb、kfree_skb、dev_kfree_skb、consume_skb
alloc_skb--分配skb dev_alloc_skb--分配skb,通常被设备驱动用在中断上下文中,它是alloc_skb的封装函数,因为在中断处理函数中被调用,因此要求原子操作(GFP_AT ...
- 安全测试===sqlmap(叁)转载
十五.操作系统控制 1.执行任意操作系统命令 参数:--os-cmd和--os-shell 若数据库管理系统是MySQL.PostgreSQL或微软的SQL Server且当前用户有相关权限Sqlma ...
- 一文看懂IC芯片生产流程:从设计到制造与封装
http://blog.csdn.net/yazhouren/article/details/50810114 芯片制造的过程就如同用乐高盖房子一样,先有晶圆作为地基,再层层往上叠的芯片制造流程后,就 ...
- 【UOJ#9】vfk的数据
我感觉这题可以出给新高一玩2333 #include<bits/stdc++.h> #define N 10005 using namespace std; string s[N]; in ...
- 改变ASPxpivotgridview弹出的prefilter的标题
说是要给变标题,再网上找了很久的资料,基本上属于一无所获,后来在官网上看到一个技术支持用vb写的,说是要本地化什么的,个人技术有限不是太懂 后来干脆就直接注册个账号,发问了,好歹等到了晚上十点左右,有 ...
- 2.ubuntu的使用
1. CTRL+ALT+T 可以将命令模式打开 2. 有可能没办法进行yum ,它会告诉你操作的方法 3. 有些操作需要获得root的权限才可以,我们得进入root状态 --> sudo pas ...