滾動僅在刷新頁面后有效

Question

在我的第一頁上，我有一些按鈕（promo1，promo2，promo3等），它們分別指向第二頁上標識為“ promo1”或“ promo2”或“ promo3” ...的元素。

因此，當我進入第二頁時，我想直接滾動到使用按鈕選擇的元素。 所以我像這樣傳遞ID：

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

我用得到的ID $routeParams從angularJs 。 但是我有一個非常大的問題：滾動停止在頁面中間（也許是因為當元素在屏幕上可見時它停止了，讓我知道），但是如果刷新頁面，滾動會執行我要求的並停止在元素之上！

這是我目前使用的代碼：

$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函數時，元素沒有完全加載。 1秒鍾后使用$timeout調用$scope.goToAnchor() （根據您的頁面加載時間進行更改）。

首先，在控制器中注入$timeout 。 然后，

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

Answer 2

在您的控制器中注入$ timeout，然后像下面那樣使用它。

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

這將有助於在渲染完整視圖后調用該函數。