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();
};
})