CODEWITHSUNDEEP
angularjs
Jim Vercoelen
Jim Vercoelen

Reputation: 1077

angular - scroll to element on div element display visiable

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

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

Upvotes: 1

Views: 5244

Answers (2)

Johan Byr&#233;n
Johan Byr&#233;n

Reputation: 918

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.

Upvotes: 1

ashfaq.p
ashfaq.p

Reputation: 5487

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.

Upvotes: 1

Related Questions