AngularJS anchorScroll not scrolling , ui-router

Question

I am using ui-router and i am trying to scroll automatically in the controller. However anchorScroll seems to do nothing, my guess is that it doesn't like two # in the URL.

Example:

index.php#/initiative/1/commentscroll/4

turns into:

index.php#/initiative/1/commentscroll/4#comment-id-4

But the scrolling isn't done (and yes the anchors actually exist ;)

Any ideas?

controllersModule.controller('InitiativeController', ['$http','$timeout','$location','$state','services','$stateParams','$anchorScroll', function($http,$timeout,$location,$state,services,$stateParams,$anchorScroll){
var pk = this;
pk.initiative={};

if($state.current.url.indexOf("/commentscroll/")!=1){
    $timeout(function() {
        $location.hash('comment-id-'+$stateParams.commentId);
        $anchorScroll();
    });
}


services.get($stateParams.initiativeId,'initiative','').then(function(data){
    pk.initiative=data;

});

function fillScrollId(element,index,array){
    if(element.initiative_comment_id===$stateParams.commentId){
        element.scrollToMe="yes";
    }
    if(element.comments.length>0){
        element.comments.forEach(fillScrollId);
    }
}
}]);

ozzi- · Accepted Answer · 2016-02-11 12:49:41Z

2

I fixed it, it was a 'timing' problem..

$location.hash('comment-id-'+$stateParams.commentId);
$timeout(function(){$anchorScroll()}, 800);

The $timeout does the trick!

answered Feb 11, 2016 at 12:49

ozzi-

3094 silver badges12 bronze badges

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

Comments

Chris Aelbrecht · Accepted Answer · 2018-12-09 19:50:37Z

1

Alternative (animated) solution without $anchorScroll

$timeout(function () {
    if ($location.hash()) {
        var anchor = 'a[name="' + $location.hash() + '"]';
        if ($(anchor)) {
            $('html,body').animate({ scrollTop: ($(anchor).offset().top) + 0 }, 'slow');
        }
    }
});

answered Dec 9, 2018 at 19:50

Chris Aelbrecht

2,09121 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS anchorScroll not scrolling , ui-router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related