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