无法通过按钮单击向上滚动到菜单顶部-AngularJS

Question

问题背景:

我正在使用Jasny Bootstrap的显示菜单。可以在此处找到演示：

http://codepen.io/michaelbowlin/pen/lDqpm

问题是：

在我的显示菜单中，我有一个表单，它要求在点击按钮打开或关闭时，显示的面板向上滚动到顶部。以下显示滚动条处于活动状态时显示的菜单面板：

以下是菜单的菜单标记：

<div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu">
    //*********Form**********
</div>
<div class="navbar navbar-default navbar-fixed-top">
    <button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

我已经添加了一个ng-单击指令上的按钮标记，并给这个ID的updateMenu。这将调用UpdateController上$box对象上名为ScrollUp（）的函数，如图所示：

app.controller('UpdateController', function ($scope, $timeout, $location,   $anchorScroll, $window, searchService) {
            $scope.ScrollUp = function () {

            $location.hash('#updateMenu');

            $anchorScroll();
        }
    }

目前这不起作用。我还尝试了以下不起作用的功能：

    app.controller('UpdateController', function ($scope, $timeout, $location,   $anchorScroll, $window, searchService) {

               $scope.ScrollUp = function () {

              $window.scrollTo(0, angular.element('#updateMenu').offsetTop);
    }

}

当用户单击按钮updateMenu时，如何向上滚动到显示菜单的顶部？

Answer 1

您发布的两个当前实现都试图将主网页滚动到顶部。我的理解是，当他们打开或关闭菜单时，您希望将菜单滚动到顶部。

Javascript

$scope.ScrollUp = function () {
  document.getElementById('updateMenu').scrollTop = 0;
}

jQuery

$scope.ScrollUp = function () {
  $("#updateMenu").scrollTop();
}

带动画的jQuery

$scope.ScrollUp = function () {
  $('#updateMenu').animate({ scrollTop: 0 }, 'slow', function () {
      alert("reached top");
  });
}

AngularJs

如果你想以AngularJS的方式做这件事，这里有一个类似的问题：在AngularJS中滚动到div的顶部

Answer 2

它应该与$anchorScroll一起使用。

但是您也可以使用它的yOffset属性来指定垂直滚动偏移（固定或动态）。

为了让yOffset正常工作，滚动应该发生在文档的根目录上，而不是某个子元素上。

Answer 3

您应该能够通过将元素的scrollTop属性设置为0来实现所需的效果。将以下代码用于向上滚动功能应允许菜单跳回起始点。

$scope.ScrollUp = function () {
  document.getElementById('updateMenu').scrollTop = 0;
}

这里包括Codepen沙箱。