vue 返回滚动条顶部组件

1. 回到顶部，使用 scrollIntoView 方法：

Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域

该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动)；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数，默认为true

使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果。

回到顶部

target.scrollIntoView();

}

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使用ts 引入组件_vue中使用TS实现父子组件直接的通信
vue中使用ts 在vue中使用ts是需要有一定的ts基础的,如果对于ts小白的话还是推荐先看一下ts官网,先了解基础以后这样使用起来才会事半功倍. 1.下载依赖项 npm install --sav ...
vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
vue底部跳转_Vue实现回到顶部和底部动画效果
本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下代码: < > export default{ props:{ step:{ //此数据是控制动画 ...
vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
javascript实现页面中回到顶部功能
当一个页面比较长的时候,在下拉页面到一定长度的时候,页面右下角通常会出现一个回到顶部的图标,点击即可以回到页面顶部,本案例对这一功能进行了简单实现.当页面下拉到一定长度后,页面右下角出现一个回到顶部图 ...
vue中文翻译拼音组件_Vue组件可简化文本的翻译方式：通过内联翻译
vue中文翻译拼音组件 @ alidrus / vue-simple-inline-translation (@alidrus/vue-simple-inline-translation) A Vue ...
vue 关闭弹如何销毁子组件_vue中的eventBus会产生内存泄漏吗
eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的 ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...

vue 返回滚动条顶部组件_vue中回到顶部

vue 返回滚动条顶部组件_vue中回到顶部相关推荐

最新文章

热门文章