小程序实现返回顶部

小程序的scroll-view组件可以实现返回顶部功能，他有两个重要属性如下：

1.scroll-top：number类型

2.bindscroll：EventHandle（事件处理）

具体使用如下：

<scroll-view class="scroll" scroll-y="true"scroll-with-animation='true' scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">

<view>........</view>

</scroll-view>

 

js:

data:{

// 返回顶部

scrollTop: {

scroll_top: 0,

show: false

}

}

// 返回顶部

scrollTopFun:function(e){

var that=this;

if(e.detail.scrollTop>100){

that.setData({

'scrollTop.show':true

})

}else{

that.setData({

'scrollTop.show': false

})

}

},

goTopFun:function(res){

var top = this.data.scrollTop.scroll_top;

if(top==1){

top=0

}else{

top=1

}

this.setData({

'scrollTop.scroll_top':top

})

}

注意事项：scroll-view组件必须有滚动方向如：scroll-y="true",以及要设置该组件的高度height

效果图如下：