Question

我正在使用ui-router，我正在尝试在控制器中自动滚动。但是，anchorScroll似乎什么都不做，我的猜测是它不像URL中的两个＃。

示例：

的index.php＃/主动/ 1 / commentscroll / 4

变成：

的index.php＃/主动/ 1 / commentscroll / 4＃注释-ID-4

但是滚动还没有完成（是的，实际上存在锚点）;

有什么想法吗？

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

Answer 1

我修好了，这是一个'时机'问题..

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

$ timeout 可以解决问题！

Answer 2

没有$ anchorScroll的替代（动画）解决方案

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

AngularJS anchorScroll不滚动，ui-router

2 个答案: