All Bookmarks are redirecting to same element

Question

All Bookmarks are redirecting to same element

44 views Asked by prasad At 11 September 2024 at 19:37

I have three bookmarks, two are on same page and one in different page, when ever I click on the link, it moving to same element and it was't smooth.
The frame works I am using are materializecss, angularjs 1 and ui router
I don't know how to write the code for it.

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">
 <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>

Any help is appreciate.
Thank you.

Original Q&A

There are 1 answers

**Gaurav Kumar Singh** · Answer 1 · 2017-09-03 11:46:43

You dont need to add multiple scrollTo function in controller, you can use only one function for all like this

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

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

And html is

<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>

TechQA.

All Bookmarks are redirecting to same element

There are 1 answers

Related Questions in ANGULARJS

Related Questions in CTRL

Popular Questions

Popular Tags

Trending Questions