回到顶部的一些见解

回到顶部,
可以说是在小程序中最开始遇到的一个问题

• 微信中 可以使用 wx.pageScrollTo, 设置好scrollTop=0 ,即可完成,
  但是其中也有一些小坑,故特此记录一下;

wx.pageScrollTo({
	scrollTop:0,
	duration:300,
	success:res=>console.log(res),
	fail:res=>console.log(res),
})

这代码本身是没有任何问题,但是与其他的东西组合在一起就会出现问题,

当在主页面(也就是主体页面设置了定位)例如使用了绝对定位时,
就要小心一些了: 比如在scroll-view 中使用position:absolute; 来当全屏展示时,
就会失效, 因为是绝对定位, 所有无法滚动
相当于真个页面就是那么大

---

说说其他方式的回到顶部的方法吧:

• 第二种:
  在scroll-view中使用 scroll-top实现(当然也是主体页面在scroll-view中)
  就是通过控制scroll-top非高度控制

<scroll-view 
          scroll-y  
          scroll-top='{{topNum}}' 
          style="height: 100%" 
          bindscrolltoupper="refresh" 
          bindscrolltolower="loadMore"  
          bindscroll="scrolltoupper">

*****************************
toTop(e) { // 一键回到顶部
    this.setData({
          topNum: this.data.topNum = 0//在data中已经声明了topNum的初始值,动态绑定
      });
  },

• 第三种
  当时引入了better-scroll时 :http://ustbhuangyi.github.io/better-scroll/doc/api.html

这里我的环境是在vue中, 通过this.$refs 来操作dom, 实现

// 回到顶部,在300毫秒之类;
  backTop() {
       this.$refs.scroll.scrollTo(0, 0, 300)  //找到scroll的dom节点
   },

• 第四种,使用最原生的方法
  (还是以vue中为例) 先监听scroll的滚动

mounted() {
			window.addEventListener('scroll', this.getScroll);
			this.getData();
			setTimeout(() => {
				this.isLoadShow = false
			}, 1500)
		},
		destroyed() {
			window.removeEventListener('scroll', this.getScroll);
		},

在通过对document进行赋值,即可实现

backTop(e) {
// console.log(e,this);
	let timer
	timer = setInterval(function () {
		let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		//实现不是有动画缓慢的滚动
		let ispeed = Math.floor(-scrollTop / 5);
		document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;

		if (scrollTop == 0) {
			clearInterval(timer)

		}
	}, 30)

当然原生a 标签也是可以的;
这也是回到顶部的一种方式

a href="#" οnclick="js_method()"

推荐:这篇文章写得挺好的: https://www.jianshu.com/p/471e732b0c7e