页面进入时不居顶,滚动后如何检测返回顶部按钮显示?

2026-04-09 07:280阅读0评论SEO资源
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计622个文字,预计阅读时间需要3分钟。

页面进入时不居顶,滚动后如何检测返回顶部按钮显示?

这里记录了小白在使用过程中遇到的问题及个人使用方法,可能并不完美:

1.监测浏览器滚动条滚动事件及滚动距离:`dmounted({ window.addEventListener('scroll', this.gundong)})`,`destroyed({ window.removeEventListener('scroll', this.gundong)})`

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。

1.监测浏览器滚动条滚动事件及滚动距离

dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(dis > 120){ this.flag = true }else{ this.flag = false } },

一般给window绑定监测事件就能获得window.pageYOffset滚动距离。

2.有些时候给body设置了{width:100%,height:100%},之后就需要将事件绑定在document.body,才能获得document.body.scrollTop滚动距离。

阅读全文

本文共计622个文字,预计阅读时间需要3分钟。

页面进入时不居顶,滚动后如何检测返回顶部按钮显示?

这里记录了小白在使用过程中遇到的问题及个人使用方法,可能并不完美:

1.监测浏览器滚动条滚动事件及滚动距离:`dmounted({ window.addEventListener('scroll', this.gundong)})`,`destroyed({ window.removeEventListener('scroll', this.gundong)})`

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。

1.监测浏览器滚动条滚动事件及滚动距离

dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(dis > 120){ this.flag = true }else{ this.flag = false } },

一般给window绑定监测事件就能获得window.pageYOffset滚动距离。

2.有些时候给body设置了{width:100%,height:100%},之后就需要将事件绑定在document.body,才能获得document.body.scrollTop滚动距离。

阅读全文