$window is not triggering on scroll in AngularJS

Question

When we scroll down the $window function is not triggering. Can someone help me out? Actually the issue is, when user scrolls down a button should appear. When user hits that button the scroll bar needs to go up same like back to top functionality.

JavaScript Code:

app.controller('appCrtl', ['$scope', '$window', function('$scope', '$window') {

  $(window).scroll(function(event) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if (scroll > 500 || scroll == undefined) {
      $scope.showUpArrow = false;
    } else {
      $scope.showUpArrow = true;
    }
  });
}]);

Answer 1

I found a few problems with your code, specially when binding the scroll event, in angular, you make use of angular.element to bind events to the DOM similarly to jQuery (it's jQLite, which is a light implementation of jQuery).

angular.element($window).bind('scroll', function () {});

Also, as per you are using $scope out of angular context, you have to surround scope operations with $scope.$apply(function () {});, which will grantee the digestion of that part of the code that is outside of angular.

angular.element($window).bind('scroll', function () {
    $scope.$apply(function () {
        // do scope stuff here
    });
});

Finally, you can use the pageYOffset property to toggle the visibility of your back to top button.

I've made an example using your code in order to demonstrate the usage of what I described before.

angular.module('app', [])
  .controller('appCrtl', [
    '$scope',
    '$window',
    AppCtrl
  ]);

function AppCtrl($scope, $window) {

  $scope.goToTop = function() {
    $window.scrollTo(0, 0);
  };

  angular.element($window).bind('scroll', function(event) {
    $scope.$apply(function() {
      var scroll = $scope.scroll = this.pageYOffset;

      if (scroll > 100 || scroll == undefined) {
        $scope.showUpArrow = true;
      } else {
        $scope.showUpArrow = false;
      }
    });
  });
};

.floating {
  position: fixed;
  margin: 10px;
  bottom: 0;
  right: 0;
}

.display {
  position: fixed;
  margin: 0;
  padding: 2px 5px;
  top: 0;
  width: 100%;
  background-color: gray;
  color: white;
}

.spacer {
  padding: 10px 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<div ng-app="app" ng-controller="appCrtl">

  <div class="display">scrollY: {{ scroll }}</div>
  <button class="floating" ng-show="showUpArrow" ng-click="goToTop()">^</button>

  <div class="spacer">
    <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
      sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
        turpis elit sit amet quam. Vivamus pretium ornare est.</p>
    </blockquote>

    <h3>Header Level 3</h3>

    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
  </div>
</div>

Answer 2

You can't mix jQuery with AngularJS in that way you try it. Just use angular.element() to bind your scroll event like in this demo plnkr. I also alowed myself to minify your if / else condition in a single line.

---

A simple solution to make it work in a nice way:

You are able to achieve what you try with simple codes. AngularJS is very kind to such logic.

Application:

var app = angular.module('plunker', []);

app.controller('ApplicationController', function($scope, $window) {

  $scope.showUpArrow = false;

  angular.element($window).on('scroll', function () {
      $scope.showUpArrow = $window.scrollY > 500;
      $scope.$apply();
  });

  $scope.goTop = function() {
    $window.scrollTo(0, 0);
  };
}); 

View:

<div class="container" ng-controller="ApplicationController">
    <div class="row">
      <button class="btn-top" 
              ng-click="goTop()"
              ng-if="showUpArrow">Scroll top</button>
    </div>
</div>

---> demo plnkr

Answer 3

$(window).scroll(function (event) { is wrong syntax, you're using Angularjs, not jQuery. The correct part should be:

angular.element($window).bind("scroll", function(e) {
  // do stuff 
});

And updated code from the question:

app.controller('appCrtl' ,['$scope','$window', function('$scope','$window') {
  angular.element($window).bind("scroll", function(e) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if(scroll>500 || scroll==undefined) {
      $scope.showUpArrow = false;
    } else {
      $scope.showUpArrow = true;
    }
  });
}]);