Anchor scroll not working when clicked

Question

Ok, I am creating a contact page where I have two forms with parallax effect. I want to include an anchor that scrolls to the next form when clicked. I have tried A LOT of code I found here on stackoverflow and none seem to work.

This is my HTML:

<div id="contenedorPrincipalContacto" class="col-xs-12" data-type="parallax-section">

    <a href="#colera" id="button">Cotizacion</a>

    <div class="col-xs-12" id="contenedorContacto" data-type="parallax-section">
        //here goes all the form code
    </div>

    <div id="colera"></div> //this is where I want to go when clicked the anchor

    <div class="col-xs-12" id="contenedorCotizacion" data-type="parallax-section">
        //here goes all the content of the second form
    </div>

    <img src="images/ipadContacto.png" id="ipadContacto" alt="">

</div>

here is the JavaScript:

app.controller('contactoCtrl', function ($scope, $rootScope, $routeParams,     $location, $http, Data) 
  {
      $(document).ready(function(){
      $("#button").click(function() {
      $('html, body, #vista').animate({
         scrollTop: $("#contenedorCotizacion").offset().top
      }, 1000);
  });
  });
});

I have seen this work and I tried it in a fiddle and it worked... I can't figure out what is wrong....

I am continuing the work of another programmer and he had this with angular:

app.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
        when('/', {
            title: 'Home',
            templateUrl: 'partials/home.html',
            controller: 'homeCtrl'
        })
        .when('/videos',{
            title: 'texts',
            templateUrl: 'partials/texts.html',
            controller: 'textsCtrl'
        })
        .when('/estandar',{
            title: 'AboutUs',
            templateUrl: 'partials/aboutUs.html',
            controller: 'aboutUsCtrl'
        })
        .when('/contacto',{
            title: 'Contact',
            templateUrl: 'partials/contact.html',
            controller: 'contactCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
  }])

I have no idea what could be wrong. Any help is appreciated.

UPDATE:

I realized Angular is indeed "catching" every link and therefore I end up in the homepage... It seems I can't work with anchor. I tried using javascript like this:

$("#button").click(function(){

        var pagina = document.getElementById("vista");
        pagina.scrollTo(0,1000);
    });

and it still isn't working. it gives me an error: "contactoCtrl.js:24 Uncaught TypeError: pagina.scrollTo is not a function" I apologize for the inconvenients, I am new to programming

Answer 1

app.config(['$routeProvider',
  function ($routeProvider) {
  $routeProvider.
    when('/', {
        title: 'Home',
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
    })
    .when('/videos',{
        title: 'texts',
        templateUrl: 'partials/texts.html',
        controller: 'textsCtrl'
    })
    .when('/estandar',{
        title: 'AboutUs',
        templateUrl: 'partials/aboutUs.html',
        controller: 'aboutUsCtrl'
    })
    .when('/contacto',{
        title: 'Contact',
        templateUrl: 'partials/contact.html',
        controller: 'contactCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
}])

that piece of code was the problem, It turns out, whenever a link is clicked, It is redirected to the home page, therefore I had to find another way to do the scrolling

Answer 2

Could you forget import jquery library?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Seeya, Jesus