angular - scroll to element on div element display visiable

Question

Trying to manage for angular to scroll automatically to a specific div element when this element becomes visible.

Already searching and trying for hours (no joke) with no success.

So far tried a couple of modules

'angular-scroll'
'angular-ui-scroll'
some others i already forgot

And coudn't get one of them to work (or only on ng-click).

How far did I get?

For this question to answer; I found an example witch basically scrolls but is not what I'am trying to get tho.

e.g.

<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="#div">
  ..
</div>

-

function scrollController ($scope, User, $location, $anchorScroll) {
  $scope.scrollToHash = function () {
    $scope.hash('div');
    $anchorScroll();
  };
};

This way I can't gat any 'animation duration' on it. What I know what should work is to set a $watch on the element and call the function if the element is shown.

Not getting anywhere so I ask you guys for help.

Still new on Angular so please don't blame this newbie!

Thanks

Johan Byrén · Accepted Answer · 2016-04-11 14:12:26Z

1

I created a service to get my scroll going. You can try this.

Controller:

app.controller("scrollController", function ($scope, scrollToTopService) {
"use strict";

    $scope.scrollToHash= function () {
       scrollToTopService.scrollToTop();
    };
});

Service:

app.service('scrollToTopService', function ($location, $anchorScroll) {
"use strict";    
    this.scrollToTop =  function () {
       $anchorScroll.yOffset = 80; //I want it top drop 80px from id. You can remove this.
       $location.hash("IdWhereIWantToScroll");
       $anchorScroll();
    };
});

And here is your view:

<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="IdWhereIWantToScroll">
..
</div>

Hope this helps. Good luck.

answered Apr 11, 2016 at 14:12

Johan Byrén

9182 gold badges13 silver badges29 bronze badges

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

Comments

ashfaq.p · Accepted Answer · 2016-02-04 06:57:04Z

1

Try to show/hide the elements using nh-show or ng-hide and then put a watch on the property used to show/hide the element. About scrolling, you already have a solution for that.

answered Feb 4, 2016 at 6:57

ashfaq.p

5,49723 silver badges36 bronze badges

3 Comments

Jim Vercoelen Over a year ago

for a reason I don't understand, ng-show/ng-hide lags at me (on height: auto). Therefor I made a directory for slide-toggeling an element. So I guess your comment isn't a solution on that one?

ashfaq.p Over a year ago

What do you mean by 'ng-show/ng-hide lags at me (on height: auto)' ? Can you make a plunker ?

Jim Vercoelen Over a year ago

Eumh, not really, I dont have that code any more. The transformation duration was lagging on height: auto. And I needed height auto because I'am using this toggle on multiple contains (with different heights). I can make a plunker for the directive I made for that one tho

Collectives™ on Stack Overflow

angular - scroll to element on div element display visiable

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related