使 onsen-ui 滑动菜单滚动到顶部答案

【问题标题】：Make onsen-ui sliding menu to scroll to top使 onsen-ui 滑动菜单滚动到顶部
【发布时间】：2015-11-05 13:45:21
【问题描述】：

我正在使用 onsen 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。

有人知道如何让它在默认关闭后立即滚动回顶部吗？

【问题讨论】：

标签： javascript jquery angularjs css onsen-ui

【解决方案1】：

首先，创建一个 Angular 控制器并将其添加到 div 元素中，该元素将包装 ons-sliding-menu 元素。如果您想使用 jQuery，您的代码将是这样的（另请参阅工作中的 CodePen Example）。

HTML

&lt;div ng-controller="MyController"&gt;&lt;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()"&gt;&lt;/ons-sliding-menu&gt;&lt;/div&gt;

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

希望对你有帮助！

【讨论】：