$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;
    }
  });
}]);

You are not using angular $window, you are using jquery: $(window) is not the same as $window, see this answer, maybe it will help you: stackoverflow.com/questions/37014728/… — Kalamarico
– Kalamarico, Commented Sep 6, 2017 at 11:20
Possible duplicate of AngularJS window scroll event does not fire — Kalamarico
– Kalamarico, Commented Sep 6, 2017 at 11:21
Any feedback? Are you going to mark an answer as the right one? — lin
– lin, Commented Nov 8, 2017 at 23:02

lenilsondc · Accepted Answer · 2017-09-06 11:53:08Z

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>

P.S. · Accepted Answer · 2017-09-06 11:37:31Z

1

$(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;
    }
  });
}]);

answered Sep 6, 2017 at 11:37

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

2 Comments

Rajesh Bunny Over a year ago

should i need to inject $window in controller ?

P.S. Over a year ago

Sure, you should inject it. If you are using $scope in controller, you should inject it, for $window and many other things we have the same rules

lin · Accepted Answer · 2017-09-06 11:50:36Z

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

Collectives™ on Stack Overflow

$window is not triggering on scroll in AngularJS

JavaScript Code:

3 Answers 3

Comments

2 Comments

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

Application:

View:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JavaScript Code:

3 Answers 3

Comments

2 Comments

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

Application:

View:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related