2017-09-03 69 views
0

我有三個書籤,兩個在同一頁面,一個在不同的頁面,當我點擊鏈接時,它移動到相同的元素,它不光滑。
我使用的框架是materializecss,angularjs 1和ui路由器
我不知道如何爲它編寫代碼。
所有書籤都重定向到相同的元素

myapp.controller('ctrl',ctrl); 
 
ctrl.$inject=['$scope', '$location', '$anchorScroll']; 
 
function ctrl($scope, $location, $anchorScroll) { 
 
    $scope.scrollTo = function(team) { 
 
     $location.hash('team'); 
 
     $anchorScroll(); 
 
    }; 
 
    
 
    $scope.scrollTo = function(contact) { 
 
     $location.hash('contact'); 
 
     $anchorScroll(); 
 
    }; 
 
};
<body ng-controller="ctrl"> 
 

 
<div class="container"> 
 
\t <div class="fixed-action-btn toolbar"> 
 
    <a class="btn-floating btn-large light-blue accent-2 pulse"> 
 
     <i class="large material-icons">menu</i> 
 
    </a> 
 
    <ul> 
 
     <li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li> 
 
     <li class="waves-effect waves-light"><a ng-click="scrollTo(home/project)">PROJECTS</a></li> 
 
     <li class="waves-effect waves-light"><a ng-click="scrollTo(team)">TEAM</a></li> 
 
     <li class="waves-effect waves-light"><a ng-click="scrollTo(contact)">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

任何幫助是讚賞。
謝謝。

+0

我提供了一個答案給你,是爲你工作? – Gaurav

回答

0

你不需要在控制器添加多個scrollTo功能,只能使用一個功能適用於所有這樣

myapp.controller('ctrl', ctrl); 
ctrl.$inject = ['$scope', '$location', '$anchorScroll']; 

function ctrl($scope, $location, $anchorScroll) { 
    $scope.scrollTo = function(state) { 
     $location.hash(state); 
     $anchorScroll(); 
    } 
}; 

和HTML是

<body ng-controller="ctrl"> 
    <div class="container"> 
    <div class="fixed-action-btn toolbar"> 
     <a class="btn-floating btn-large light-blue accent-2 pulse"> <i class="large material-icons">menu</i> </a> 
     <ul> 
     <li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li> 
     <li class="waves-effect waves-light"><a ng-click="scrollTo('home/project')">PROJECTS</a></li> 
     <li class="waves-effect waves-light"><a ng-click="scrollTo('team')">TEAM</a></li> 
     <li class="waves-effect waves-light"><a ng-click="scrollTo('contact')">CONTACT</a></li> 
     </ul> 
    </div> 
    </div> 
</body> 
相關問題