所有书签都重定向到相同的元素
问题描述:
我有三个书签,两个在同一页面,一个在不同的页面,当我点击链接时,它移动到相同的元素,它不光滑。
我使用的框架是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>
任何帮助是赞赏。
谢谢。
答
你不需要在控制器添加多个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>
我提供了一个答案给你,是为你工作? – Gaurav