title: angular ui router scroll to an anchor/optional parameter
body: <pre><code>url: '/blog/:id/:slug?scrollTo',
  </code></pre>
  
  <p>when the scrollTo is not null 
  I want scroll the page to the scrollTo
  value.</p>
  
  <p>I tried like:</p>
  
  <pre><code> $scope.$on('$stateChangeSuccess', function (event, toState) {
      if($stateParams.scrollTo){
          $location.hash($stateParams.scrollTo);
          $anchorScroll();  
      }
  });
  </code></pre>
  
  <p>but it doesn't work</p>
  
  <p>the request url is like:</p>
  
  <p>/blog/534f9ccb520daa8c167b3431/setting-up-email-for-my-domain?scrollTo=53561c675541f30612ee222c#53561c675541f30612ee222c</p>
  
  <p>so what's wrong with it ?</p>
  
  <p>^^</p>
  
  <h2>UPDATE</h2>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;body data-ng-controller="MainCtrl"&gt;
      &lt;div id="content" data-ng-controller="viewCtrl" class="ui-view-container"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li data-nb-signals="" signals="signals" labels="mapLabels" routes="mapRoutes" class="dropdown signals"&gt;&lt;/li&gt;     &lt;/ul&gt;
          &lt;div data-ui-view autoscroll="true"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>.controller('MainCtrl', function ($scope,localStorageService,Socket) {
     /* Signals socket.io */
     $scope.signals = [];
     $scope.num = 0;
  
     Socket.on('addedPost',function (data) {
         $scope.signals.push(data);
         $scope.num = $scope.signals.length;
     });
     Socket.on('approvedComment',function (data) {
         if(localStorageService.get('comment_id_'+data.post_id)){
             localStorageService.remove('comment_id_'+data.post_id);
             localStorageService.add('comment_id_reply_'+data.post_id,data.id);
             $scope.signals.push(data);
             $scope.num = $scope.signals.length;
         }
     });
     Socket.on('repliedComment',function (data) {
         if(localStorageService.get('comment_id_reply_'+data.post_id)){
             $scope.signals.push(data);
             $scope.num = $scope.signals.length;
         }
     });
     $scope.mapLabels = {
         added_post:'Nuovo articolo',
         approved_comment:'Commento approvato',
         replied_comment:'Replica commento'
     };
     $scope.mapRoutes = {
         added_post:'blog_details({id:signal.id,slug:signal.slug})',
         approved_comment:'blog_details({id:signal.post_id,slug:signal.post_slug,scrollTo:signal.id})',
         replied_comment:'blog_details({id:signal.post_id,slug:signal.post_slug,scrollTo:signal.id})'
     };
     /* $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'added_post',title:'Ah cje bel'});
          $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'approved_comment',title:'Ah cje bel'});
          $scope.signals.push({_id:'534f9ccb520daa8c167b3431',slug:'setting-up-email-for-my-domain','label':'replied_comment',title:'Ah cje bel'});*/
  })
   .config(function(PREFIX_LOCAL_STORAGE,$locationProvider,$urlRouterProvider,localStorageServiceProvider,$uiViewScrollProvider) {
      $urlRouterProvider.otherwise('/');
      $locationProvider.html5Mode(true).hashPrefix('!'); 
      localStorageServiceProvider.setPrefix(PREFIX_LOCAL_STORAGE);
      $uiViewScrollProvider.useAnchorScroll();
  })
   .directive('nbSignals',function($location,$stateParams,$anchorScroll) {
     return {
         restrict: 'A',
         scope:{
             signals:'=',
             mapLabels:'=labels',
             mapRoutes:'=routes'
         },
         template:   '&lt;a data-toggle="dropdown" href="#"&gt;'+
             '&lt;i class="glyphicon glyphicon-inbox"&gt;&lt;/i&gt;&lt;span class="badge" data-ng-bind="signals.length"&gt;&lt;/span&gt;'+
             '&lt;b class="caret"&gt;&lt;/b&gt;'+
             '&lt;/a&gt;'+
             '&lt;ul class="dropdown-menu"&gt;'+
             '&lt;li data-ng-repeat="signal in signals"&gt;'+
             '&lt;a data-ui-sref="{{mapRoutes[signal.label]}}" data-ng-click="markAsRead($index)" title="{{signal.label}}"&gt;{{mapLabels[signal.label]}}&lt;/a&gt;'+
             '&lt;/li&gt;'+
             '&lt;/ul&gt;',
         controller:function($scope,$element){
             $scope.$on('$stateChangeSuccess', function (event, toState) {
                 if($stateParams.scrollTo){
                     $location.hash($stateParams.scrollTo);
                     $anchorScroll();  
                 }
             });
             $scope.markAsRead = function(index){
                 $scope.signals.splice(index, 1);
             };
             $scope.$watch('signals',function(signal){
                 $element.css('visibility', function(i, visibility) {
                     return ($scope.signals.length &gt; 0) ? 'visible' : 'hidden';
                 });
             },true);
  
         }
     };
  });
  </code></pre>
  
  <p>so you can have an idea ....</p>