How to get Jquery scrollTo plugin work with AngularJS - without flickering

Question

I'm trying to combine the scrollTo plugin for Jquery with AngularJS. The reason why I want to do this is that I want to have automated scrolling to a specific section of the website if the corresponding URL will be used. Until now this works, but not perfectly. There is a short flickering if one clicks on a link, just before the animation starts.

I think the problem can be solved by using:

event.preventDefault();

But I don't know how to combine the call of preventDefault function with my AngularJS code ... I'm new to AngularJS so maybe there is a simple solution which I just don't know yet. I tried several solutions which I found on the net but without success.

Here you can find an abstract of the current solution : http://jsfiddle.net/Hcb4b/6/ It's not runnable because I can't include the easing plugin ...

Thanks in advance

Please provide an example in a demo environment, such as JSFiddle. Having to dissect the code of a live site is not ideal, and will mean you get fewer (if any) answers. — Rory McCrossan, Aug 28 '13 at 12:27
I found a solution by myself : [AngularJS. How to disable auto-scroll to top of my page](http://stackoverflow.com/questions/14530572/angularjs-how-to-disable-auto-scroll-to-top-of-my-page/14534133#14534133) — Oliver13, Aug 28 '13 at 13:54

basarat · Answer 1 · 2013-08-28T12:50:23.557

0

The entire source of ngClick is super simple https://github.com/angular/angular.js/blob/v1.2.0rc1/src/ng/directive/ngEventDirs.js#L43-L52

Effectively:

ng.directive('ngClick',['$parse',function($parse){
      return function(scope, element, attr) {
        var fn = $parse(attr['ngClick']);
        element.on('click', function(event) {
          scope.$apply(function() {
            fn(scope, {$event:event});
          });
        });
      };
   }]);

So you can create your own very easily:

yourModule.directive('superClick',['$parse',function($parse){
      return function(scope, element, attr) {
        var fn = $parse(attr['superClick']);
        element.on('click', function(event) {
          event.preventDefault(); // Magic stuff
          scope.$apply(function() {
            fn(scope, {$event:event});
          });
        });
      };
  }]);

edited Aug 28 '13 at 12:50

answered Aug 28 '13 at 12:44

basarat

261,912
58
460
511

thank you for your answer. I used this solution [eat-click](http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags-in-angularjs) allready. I think it's similar but does not work in my case ... – Oliver13 Aug 28 '13 at 12:54
then the original assumption about `event.preventDefault();` being the solution is wrong I suppose – basarat Aug 28 '13 at 14:07
1

Yes you are right. The assumption about event.preventDefault(); ist wrong. The solution is this here: [AngularJS. How to disable auto-scroll to top of my page](http://stackoverflow.com/questions/14530572/angularjs-how-to-disable-auto-scroll-to-top-of-my-page) . I will write an answer to my own question when the lock of 8 hours is over. – Oliver13 Aug 28 '13 at 14:16

score 0 · Answer 2 · edited May 23 '17 at 10:31

Check out this thread which is similar. ScrollTo function in AngularJS

I had a similar challenge. I ended up using the search property to do the scrolling - this way I can access the target element directly from the URL. I ended up using a watch on the rootScope for a change in $location.search to trigger the scroll.

The flickering is caused by a page reload - to disable the 'flickering', set reloadOnSearch: false in your route.

Below is the code for scrolling:

.run(function($location, $rootScope) {
  $rootScope.$on('$viewContentLoaded', function() {
     $rootScope.$watch(function() { return $location.search() }, function(search) {
       var scrollPos = 0 
       if (search.hasOwnProperty('scroll')) {
         var $target = $('#' + search.scroll);
         var scrollPos = $target.offset().top;
       }
       $("body,html").animate({scrollTop: scrollPos}, "slow");                                                                                                                                                                    
     });  
   });    
 })

You can now use clean anchor tags without directives like so:

<a ng-href="#/?scroll=myElement">My element</a>

How to get Jquery scrollTo plugin work with AngularJS - without flickering

2 Answers2