使onsen ui滑动菜单滚动到顶部
Make onsen-ui sliding menu to scroll to top
我正在使用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>
我在postclose="menutotop()"上实现了,但它似乎不适用于jQuery。
有人知道如何在默认情况下关闭后立即滚动回顶部吗?
首先,创建一个Angular控制器并将其添加到div
元素中,该元素将封装ons-sliding-menu
元素。如果您想使用jQuery,您的代码将是这样的(另请参阅工作的CodePen示例)。
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>
JS
ons.bootstrap()
.controller('MyController', function($scope) {
$scope.menutotop = function() {
$('.page__content').animate({
scrollTop: $('.ons-list-inner').height()
})
.animate({
scrollTop: 0
});
}
});
我希望它能有所帮助!
相关文章:
- 滚动固定滚动顶部()的跳跃效果
- 当偏移量改变时滚动顶部
- 滚动顶部在滑动后不起作用切换
- 使滚动顶部始终检查
- 页面滚动在粘性页脚布局中保持滚动顶部位置
- 滚动顶部闪烁-Internet Explorer
- j查询滚动顶部麻烦
- 我如何使用滚动顶部()获取HTML文档的位置
- 滚动顶部到元素 - 20px
- JQuery 偏移和滚动顶部问题
- 滚动事件仅在滚动顶部时触发
- 单击并滚动顶部
- 每次在顶部滚动顶部重置
- IE <选择>滚动顶部
- 打开对话框正在更改我的滚动顶部位置
- 为什么有时滚动顶部/滚动左不可写
- 滚动顶部 Jquery
- 数据表在页面更改时滚动顶部
- 使用滚动顶部显示滚动的像素
- 可以 jQuery invalidHandler 通过父窗口中的 iframe 滚动顶部