讓溫泉的UI滑動滾動菜單頂部

我使用溫泉UI構建一個應用程序，並有一個很長的菜單：讓溫泉的UI滑動滾動菜單頂部

<ons-template id="menu.html"> 
     <ons-page modifier="menu-page"> 
      <ons-toolbar modifier="transparent"></ons-toolbar> 
      <ons-list class="menu-list"> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('updates.html', {closeMenu: true})"> 
        <ons-icon icon="fa-updates"></ons-icon>Updates</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('about.html', {closeMenu: true})"> 
        <ons-icon icon="fa-about"></ons-icon>About</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('venue.html', {closeMenu: true})"> 
        <ons-icon icon="fa-venue"></ons-icon>Venue</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('agenda.html', {closeMenu: true})"> 
        <ons-icon icon="fa-agenda"></ons-icon>Agenda</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('speakers.html', {closeMenu: true})"> 
        <ons-icon icon="fa-speakers"></ons-icon>Speakers</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('sponsors.html', {closeMenu: true})"> 
        <ons-icon icon="fa-sponsors"></ons-icon>Sponsors</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('resources.html', {closeMenu: true})"> 
        <ons-icon icon="fa-resources"></ons-icon>Resources</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('feedback.html', {closeMenu: true})"> 
        <ons-icon icon="fa-feedback"></ons-icon>Feedback</ons-list-item> 
       <ons-list-item class="menu-item" ng-click="menu.setMainPage('register.html', {closeMenu: true})"> 
        <ons-icon icon="fa-register"></ons-icon>Register</ons-list-item> 
      </ons-list> 
     </ons-page> 
    </ons-template>

當我在一個小屏幕和向下滾動菜單進行保持在相同的位置並且不回到初始視圖。

代碼菜單：

<ons-sliding-menu menu-page="menu.html" main-page="updates.html" side="left" var="menu" type="reveal" max-slide-distance="200px" swipeable="true" ons-postclose="menutotop()"></ons-sliding-menu>

我實現ONS-postclose = 「menutotop（）」，但它似乎不使用jQuery。

是否有人知道如何在默認關閉時將其滾動回頂部？

來源

2015-11-04 qqruza

首先，創建一個角控制器並將其添加到div元素中，該元素將包裝ons-sliding-menu元素。如果您想使用jQuery，您的代碼將如下所示（另請參閱工作CodePen Example）。

HTML

<div ng-controller="MyController"><ons-sliding-menu menu-page="menu.html" main-page="updates.html" side="left" var="menu" type="reveal" max-slide-distance="200px" swipeable="true" ons-postclose="menutotop()"></ons-sliding-menu></div>

ons.bootstrap() 
 
    .controller('MyController', function($scope) { 
 
    $scope.menutotop = function() { 
 
     $('.page__content').animate({ 
 
      scrollTop: $('.ons-list-inner').height() 
 
     }) 
 
     .animate({ 
 
      scrollTop: 0 
 
     }); 
 
    } 
 
    });

我希望它有幫助！

來源

2015-11-05 05:45:21

讓溫泉的UI滑動滾動菜單頂部

回答

相關問題