使用AngularJS $ anchorScroll滾動到另一個頁面的定位標記

從我的AngularJS主頁我需要滾動到另一個頁面中的定位標記。基於url，這兩個頁面都以部分html的形式進入ng-view組件。在啓動服務器時，主頁將被加載，然後從那裏進入常見問題頁面。我用＃正常的href，但沒有指向目標頁面中正確的div。這是我試圖與$anchorScroll

這裏是控制器的方法

\t 
 
$scope.scrollToFaq = function(id) { 
 
    $location.path("/faq") 
 
    $location.hash(id); 
 
    $anchorScroll(); 
 
}

這是我如何使用它在home.html的

但是這不能正常工作。如果我直接加載常見問題頁面，然後回來並單擊主頁上的錨點鏈接，它就可以工作。是否有可能通過`$ anchorScroll來做到這一點

來源

2015-03-13 Dhanush Gopinath

聽起來像一個歷史相關的問題。如果div一旦被立即發現，它已經被加載。這個解決方案過去爲我工作。也許有個想法等待頁面加載。

$scope.scrollToFaq = function(id) { 
    $location.path("/faq"); 
    $(window).on("load", function(){  
     $location.hash(id); 
     $anchorScroll(); 
    }); 
    };

來源

2015-03-13 14:27:50 Michelangelo

試過，但不幸的是它不工作。在這種情況下，請閱讀onLoad在Angular中無法使用的地方。 – 2015-03-13 17:18:18

好的，我的情況有點不同。如何將函數添加到監視您URL的作用域，然後相應地滾動？ – Michelangelo 2015-03-13 18:56:36

嘗試使用Angular的$ timeout服務。

$scope.scrollToFaq = function(id) { 
$location.path("/faq"); 
$timeout(function(){ 
    $location.hash(id); 
    $anchorScroll(); 
}, delay);

這裏delay將要等到錨滾動發生的時間。我已經閱讀了大約300ms/400ms爲人們工作。當我遇到這個問題時，我只需撥打$timeout內的$anchorscroll即可。所以，使用最適合你的情況。

注：我正在尋找解決方案，而不使用$timeout。當我找到一個時會更新。

來源

2015-08-11 14:57:40 svikasg

我有同樣的問題，你可以讓我知道其他的解決方案，而不使用$超時？ – 2017-02-09 16:25:50

有同樣的問題。但修復它:) 想法是改變到URL，等待半秒鐘，並跳轉到錨點。

HTML：

<a href="" ng-click="goToAnchor('/', 'links')">Links</a>

控制器：

angular.module('exampleApp').controller('NavbarCtrl', function ($scope, $location, $timeout, $anchorScroll) { 
     $scope.goToAnchor = function(path, anchor){ 
      $location.path('/'); 

      $timeout(function() { 
      $anchorScroll(anchor); 
      }, 500); 
     }; 
});

來源

2015-09-28 15:47:45 Eruvanos

使用AngularJS $ anchorScroll滾動到另一個頁面的定位標記

回答

相關問題