Unable to scroll up to the top of a menu from a button click - AngularJS

Question

Question Background:

I am using Jasny Bootstrap's Reveal Menu. A demo can be found here:

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

The Issue:

Within my reveal menu I have a form that requires the revealed panel to be scrolled up to the top when the button is either opened or closed from a click. The following shows the menu panel revealed with the scroll bar active:

The following is the menu markup for the menu:

<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>

I have added a ng-click directive on the Button markup and give this the ID of updateMenu. This calls a function named ScrollUp() on the $scope object on the UpdateController, as shown:

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

            $location.hash('#updateMenu');

            $anchorScroll();
        }
    }

Currently this does not work. I have also tried the following functionality which does not work:

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

               $scope.ScrollUp = function () {

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

}

How can I scroll up to the top of the revealed menu when the user clicks the button updateMenu?

hootstheowl · Accepted Answer · 2016-07-17 11:25:50Z

1

+50

You should be able to achieve the desired effect by setting the element's scrollTop property to 0. Using the following code for your ScrollUp function should allow for the menu to jump back to it's starting point.

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

Codepen sandbox included here.

answered Jul 17, 2016 at 11:25

hootstheowl

2611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahfuz · Accepted Answer · 2016-07-21 20:29:46Z

0

It should work with $anchorScroll.

But you can also use its yOffset property to specify a vertical scroll-offset (either fixed or dynamic).

In order for yOffset to work properly, scrolling should take place on the document's root and not some child element.

answered Jul 21, 2016 at 20:29

Mahfuz

4013 silver badges10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:51:29Z

0

Both of your current implementations that you posted are trying to scroll the main webpage to the top. The way I understand it is you want to scroll the menu to the top when they open or close the menu.

Javascript

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

jQuery

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

jQuery with animation

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

AngularJs

If you want to do it the AngularJS way there is a similar question here: Scroll to top of div in AngularJS

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 21, 2016 at 20:29

Gary Holiday

3,6124 gold badges37 silver badges87 bronze badges

Collectives™ on Stack Overflow

Unable to scroll up to the top of a menu from a button click - AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related