javascript - 滚动仅在刷新页面后才起作用

Question

在我的第一页上，我有一些按钮(promo1、promo2、promo3，...)，它们分别指向第二页上 ID 为“promo1”或“promo2”或“promo3”的元素，... .

因此，当我登陆到第二页时，我想直接滚动到我使用按钮选择的元素。所以我这样传递 id:

mysite.com/secondpage/:promo1(/2/3, depends on the button.)

我通过使用 angularJs 中的 $routeParams 获取 id。但我有一个非常大的问题:滚动停止在页面中间(也许是因为当元素在屏幕上可见时它停止，请告诉我)，但是如果我刷新页面，滚动就会按照我的要求进行并停止在元素的顶部!

这是我目前使用的代码:

$scope.goToAnchor = function(){
        // This is just one of the test I've made, does not work better.

        // if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){
        //     $scope.anchor = $routeParams.anchor.replace(':','#');
        //     $('html, body').animate({
        //         scrollTop: $($scope.anchor).offset().top
        //     }, 200);
        // }

        // Code I use:

        if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){
            $location.hash("#");
            $location.hash($routeParams.anchor.replace(':',''));
            $anchorScroll();
        }
    };
    $scope.goToAnchor();

如果您只有一些提示，请随时发表评论，只要我现在正在处理此问题 2 天，它就会对我有所帮助...

Answer 1

这是因为当调用 goToAnchor 函数时，您的元素尚未完全加载。使用 $timeout 在 1 秒后调用 $scope.goToAnchor()(根据您的页面加载时间更改)。

首先，在 Controller 中注入(inject)$timeout。那么，

$timeout(function() {
  $scope.goToAnchor();
}, 1000);