3

hola tengo un boton al cual quiero que al momento de hacerle click sobre este se haga scroll hacia un div que tengo mas abajo

    <div class="barra_ver">
      <input type="button" name="bajar"  scrollTo="sectionB" >
    </div>

el boton esta dentro de un div y el div al que quiero llegar haciendo scroll es el sigueinte:

        <div class="com_fun" id="sectionB" >
      <h1> usted esta aqui </h1>
    </div>

como puedo resolver esto en angular

3 respuestas 3

2

Puedes agregar el siguiente código:

Declaramos el module de Angular:

var angularApp = angular.module("angularApp", []);

Realizamos un servicio que se encargue de realizar el scroll hasta tu elemento con el id "SectionB":

angularApp.service('scrollService', function ($location, $anchorScroll) {
    this.scrollEnd = function () {
        $location.hash("sectionB");
        $anchorScroll();
    };
});

Realizamos un controller y mandamos a llamar nuestro servicio:

angularApp.controller("scrollController", function ($scope, scrollService) {
    $scope.scrollToHash = function () {
        scrollService.scrollEnd();
    };
});

Toma en cuenta que debes mandar a llamar el controller desde tu html y tu botón debe estar dentro. Tampoco olvides mandar a llamar ng-click="scrollToHash()" en el botón.

Espero sea de ayuda.

Saludos.

1
  • pasarle un parámetro a la function estaría bien para hacerlo mas universal no? Commented el 1 jun. 2018 a las 19:21
1

Puedes hacerlo mediante jquery, agrega a tu boton una clase asi.

<div class="barra_ver">
   <input type="button" name="bajar" class="btn-scroll">
</div>

Ya que le tienes un id al div que quieres llegar haces una simple funcion en jquery donde primero recoges la posicion de tu div en la pagina

var sectionB = $('#sectionB').offset().top;

y luego

 $('#btn-scroll').on('click', function(e){
   e.preventDefault();

   $('html, body').animate({
       scrollTop: sectionB
   }, 500);

 });

Asi cuando le tu boton dispare el evento click te llevara a la seccion que deseas

2
  • 2
    Mezclar jQuery y Angular no es, en general, una buena idea Commented el 1 jun. 2018 a las 16:47
  • @PabloLozano, no lo sabia hermano aun no trabajo con angular. Pero gracias por la aclaración Commented el 1 jun. 2018 a las 20:30
0

Puedes usar puro HTML para resolverlo, disfrazando un enlace como botón:

.largo {
 width: 200px;
 height: 1600px;
 background: lightgray;
}

a {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 4px;
  border-radius: 3px;
}
<a href="#abajo">Pulsa para bajar</a>
<div class="largo">div largo para provocar scroll</div>
<span id="abajo">Has llegado</span>

En mi ejemplo he puesto yo los CSS, pero si usas bootstrap es tan sencillo como aplicar la clase "btn" al elemento <a>:

<a class="btn">Delete</a>

Si usas material sería algo como

<a class="mc-button mc-button-text">Pulsa para bajar </a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.