這篇文章主要為大家展示了“如何實現(xiàn)微信小程序頁面返回頂部效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“如何實現(xiàn)微信小程序頁面返回頂部效果”這篇文章吧。

效果預覽：

js部分：

Page({
?data:?{
??topNum:?0
?},
?returnTop:?function?()?{
??this.setData({
???topNum:?this.data.topNum?=?0
??});
?}
})

wxml部分：

?1
?1
?1
?1
?1
?1
?1
?1
?1
?1

頂部

wxss部分:

page{
?width:?100%;
?height:?100%;
}
scroll-view{
?height:?100%;
?width:?100%;
}
view{
?width:?100%;
?height:?200px;

?text-align:?center;
?line-height:?200px;
?font-weight:?600;
}
view:nth-child(odd){
?background-color:?red;
}
.top{
?width:?50px;
?height:?50px;
?position:?fixed;
?right:?10px;
?bottom:?10px;
?z-index:?1;
?background-color:?yellow;
?color:?red;
?text-align:?center;
?line-height:?50px;
}

以上是“如何實現(xiàn)微信小程序頁面返回頂部效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！