How to navigate to particular id using href of a tag?

Hi,

I am trying to do simple navigation to an element with id tab1. I have

<a href="#tab1">TAB1</a>
<a href="#tab2">TAB2</a>
<div id="tab1">Tab1 Contents</div>
<div id="tab2">Tab2 Contents</div>
1 Like

You have to consider following reference of ui-router:

I have played around with the above link info with little success. Could you or someone elaborate on a solution to OP?

any solution for this problem …?

Ah okay… now i get your problem^^.

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
every scroll-container (ion-content, ion-scroll) can handle a name attribute.
with the $ionScrollDelegate you can get such a scroll container with $ionicScrollDelegate.getByHandle().
If you get your ion-content with that function -> you can put a ng-click function on your links and in your function use:
$ionScrollDelegate.anchorScroll() to scroll to a dom node with a given id.

if you only have ion-content as scroll-container on your view you can use something like this:

$scope.scrollTo = function (id) {
  $ionScrollDelegate.anchorScroll(id);
};

if you have more than one:

$scope.scrollTo = function (id) {
  $location.hash(id);
  var delegate = $ionScrollDelegate.getByHandle('content');
  delegate.anchorScroll();
};

Template:

<ion-content delegate-handle="content"></ion-content>

Greetz and good night, bengtler.

2 Likes

Thank you very much for your answer, one question still remains for me

<a ng-click="scrollMainToTop()" class="first">Antes de la carrera</a>

<div id="durantelacarrera" delegate-handle="durantedelacarrera" class="tab">
   
</div>

Y en app.js

.controller('HistoriaCtrl',function($scope,$ionicScrollDelegate){
     $scope.scrollMainToTop = function() {
         $ionicScrollDelegate.$getByHandle('despuesdelacarrera').scrollTop();
    };
 })

This does not work,?

the delegate handle has to be placed on ion-scroll or ion-content :wink:
So put it on your ion-content, because your div is placed in the ion-content and so the ion-content should scroll to the id

I have 3 large div, which I did not understand your explanation, is that these should replace div ionic content? scroll or ionic? Because I did but still does not work. I’ll show you the code

<script id="historia.html" type="text/ng-template">
  <ion-view title='{{title}}' left-buttons="leftButtons">
    <ion-content padding="true" >
      <div style="background-color:#E8E8E8;">
        <div id="sticky-nav">
          <div style="width: 100%;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 0;max-width: 62.5em;" id="row">
            <nav class="large-12 columns" id="tabs" style="width: 100%;">
              <a ng-click="antesDeLaCarrera()" class="first">Antes de la carrera</a>
              <a ng-click="duranteDeLaCarrera()" class="middle">Durante la carrera</a>
              <a ng-click="despuesDeLaCarrera()" class="last active">Después de la carrera</a>
            </nav>
            <ion-scroll delegate-handle="antesdelacarrera" class="tab" style="padding-top: 115px;">

              <div class="full-width imagenFondo alimentacion" style="background :url('img/antes-alimentacion.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Estar bien hidratado y comer comidas sanas que aporten energía a tu cuerpo es parte de lo que debes considerar en tu plan de alimentación previo al Entel Mountainbike Challenge.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo mecanica" style="background:url('img/antes-mecanica.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;margin-top: 20px;">
                  <div class="large-12 columns">
                    <h3>Mec√°nica</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>¡Revisa tu bicicleta con anticipación! Si encuentras alguna falla, podrás acudir a un servicio técnico sin arriesgar tu participación en la carrera.</p>
                  </div>
                </div>
              </div>
            
            </ion-scroll>
            <ion-scroll delegate-handle="durantedelacarrera" class="tab">
              <div class="row" style="height:100px;"></div>
              <div class="full-width imagenFondo alimentacion" style="background:url('img/durante-alimentacion.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Manténte hidratado y nutrido durante toda la carrera, independientemente de los kilómetros que recorras.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo calentamiento" style="background:url('img/durante-calentamiento.jpg')no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Calentamiento</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Un buen calentamiento anticipa y prepara tus m√ļsculos para el esfuerzo intenso que est√° por venir.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo posturas-y-maniobras" style="background:url('img/durante-posturas-y-maniobras.jpg')no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Posturas y maniobras</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Mejora tu rendimiento y comodidad a través de una postura correcta arriba de la bicicleta.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo mecanica" style="background:url('img/durante-mecanica.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Mec√°nica</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Lleva contigo un kit de herramientas b√°sico para enfrentar los posibles problemas que puedas tener durante la carrera.</p>
                  </div>
                </div>
              </div>
              
            </ion-scroll>
            <ion-scroll delegate-handle="despuesdelacarrera" class="tab">
              <div class="row" style="height:100px;"></div>
              
              <div class="full-width imagenFondo elongacion" style="background :url('img/despues-elongacion.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Elongación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Elonga cada parte del cuerpo para evitar lesiones musculares.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo alimentacion" style="background :url('img/despues-alimentacion.jpg') no-repeat center;background-size: 100%;">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;">
                  <div class="large-12 columns">
                    <p>Aprovecha la ventana metabólica que se produce post deporte para ingerir una alta cantidad de nutrientes.</p>
                  </div>
                </div>
              </div>
            </ion-scroll>
          </div>
          <div class="full-width carreracomenzo" style="background: #ff6702;width: 100%;max-width: 100%;" id="footer_entrenamiento">
            <div class="row">
              <div class="large-12 columns">
                <h2>Para ti, la carrera ya comenzó</h2>
                <h3>No te olvides de estos prácticos tips y realizar una buena alimentación.</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>


.controller('HistoriaCtrl',function($scope,$ionicScrollDelegate){
   $scope.antesDeLaCarrera = function() {
    $ionicScrollDelegate.$getByHandle('antesdelacarrera').scrollTop();
  };
    $ionicScrollDelegate.$getByHandle('durantelacarrera').scrollTop();
  };
  $scope.despuesDeLaCarrera = function() {
    $ionicScrollDelegate.$getByHandle('despuesdelacarrera').scrollTop();
  };
})

in simple dom

<ion-content delegate-handle="myContent">
  <a ng-click="scrollTo('1')">GoTO 1</a>
  <div id="1">MyContentOfDiv1</div>
</ion-content>

controller:

$scope.scrollTo = function (id) {
   $location.hash(id);
   var delegateHandle = $ionicScrollDelegate.$getByHandle('myContent');
   delegateHandle.anchorScroll(id);
};
3 Likes

I built a codepen for you:
anchorscroll codepen

2 Likes

You have an error, change this line:
delegateHandle.anchorScroll(id);

To this:
delegateHandle.anchorScroll();

1 Like

First: use $location.hash(ID);
Second: use $ionicScrollDelegate.anchorScroll(true);

Ex:
`
var scrollToLocation = function ( idLocation ) {

$location.hash( idLocation );
$ionicScrollDelegate.anchorScroll(true);

};

The parameter true or false in anchorScroll is used to say if scroll will be animated or not.
`

1 Like