“錨點”功能在實際應用設計的好，可以提高用戶體驗。今天碰到一個類似下面功能：

由于頁面數據比較多，除了做些上拉加載，下拉刷新等優(yōu)化。還可以進行進行分類，如上圖。功能要求:點擊導航的菜單，相應頁面的分類內容滑動到頁面頂部。由于微信小程序頁面無dom操作，改功能改如何操作呢？

一開始想到 wx.pageScrollTo(Object object) 這個API，由于每個點擊每個導航利用wx.pageScrollTo滾動到相應分類的scrollTop不能確定，所以放棄了。

后發(fā)現 scroll-view 組件 的屬性 scroll-into-view 可以利用一下：

<scroll-view scroll-yscroll-into-view="{{toView}}"bindscroll="scrollTopFun"style='height:100vh'scroll-top="{{scrollTop.scroll_top}}"scroll-with-animation="true"><!-- 內容 --><view class='bg-white m-t10'> <view class='flex'> <view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}' data-id="{{index}}" bindtap='navHandleClick'  wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view> </view>  <view class='has-padding-sm'> <!-- 實時停電信息 --> <view>  <view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">   <view class='itembox' id='{{item.id}}'>   <view class='titlebox flex'>   <view class='flex-1 text-ellipsis'>{{item.name}}</view>   <view class='f12'>    <text class='icon icon-like-o inline-middle'></text>    <text class='inline-middle m-l5'>加入關注</text>   </view>   </view>    <view class='itemconbox'>   <view class='flex c9'>    <view class='line m-r5 flex-1 self-middle'></view>    ·<text class='p-w-sm'>昨天</text>·    <view class='line m-l5 flex-1 self-middle'></view>   </view>    <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">    <view class='border-line-b flex text-bold p-t5 p-b5'>    <view class='flex-1'>     <image src='../../images/date.png' class='ico-date inline-middle'></image>     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>    </view>    <view>電網故障停限電</view>    </view>    <view class='p-w-sm p-v-sm'>    <view>     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>     <text class='f12 c6'>2018-09-13 16:15:00</text>     <text class='label bg-A5A5A5'>預計</text>    </view>    <view>     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>     <text class='f12 c6'>[開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、</text>    </view>    <view>     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>    </view>    </view>   </view>   </view>    <view class='itemconbox'>   <view class='flex c9'>    <view class='line m-r5 flex-1 self-middle'></view>    ·<text class='p-w-sm'>昨天</text>·    <view class='line m-l5 flex-1 self-middle'></view>   </view>    <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">    <view class='border-line-b flex text-bold p-t5 p-b5'>    <view class='flex-1'>     <image src='../../images/date.png' class='ico-date inline-middle'></image>     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>    </view>    <view>電網故障停限電</view>    </view>    <view class='p-w-sm p-v-sm'>    <view>     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>     <text class='f12 c6'>2018-09-13 16:15:00</text>     <text class='label bg-A5A5A5'>預計</text>    </view>    <view>     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>     <text class='f12 c6'>[開福區(qū)] 湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、湘江世紀城、</text>    </view>    <view>     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>    </view>    </view>   </view>   </view>   </view>   </view>  <view class='text-center p-t10 f12 c9'>  沒有更多信息了  </view> </view>  </view> </view></scroll-view> <!-- 導航 --><view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滾動到離頂部一定距離在顯示導航按鈕 --> <view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>導航</view> <view class='navconbox' hidden='{{isnavfixed}}'> <view class='floor gotop' catchtap='gotop'>返回頂部</view> <view class='floor' bindtap='clickScroll' data-id="{{item.id}}"  wx:for="{{navlist}}" wx:key="{{index}}">  {{item.name}}  </view> </view></view>