I have this code:
<div class="container citiestop">
<div class="columns">
<a href="/{{$locale}}/contact#bcn" class="column is-4 citytop city-1-top red click-preloader" >
<div id="tobcn">Barcelona.</div>
</a>
<a href="/{{$locale}}/contact#mad" class="column is-4 citytop city-2-top green click-preloader">
<div id="tomadrid">Madrid.</div>
</a>
<a href="/{{$locale}}/contact#mex" class="column is-4 citytop city-3-top blue click-preloader">
<div>@include('includes.trans',['es'=>'México', 'en'=>'Mexico']).</div>
</a>
</div>
</div>
And in the bottom on the page I have 3 divs with ids: bcn
, mad
and mex
.
I'm trying to do this with jQuery:
$('#tobcn').click = function () {
$(document).scrollTo('#bcn');
}
When I click go to the URL of href but doesn't scroll.
What's wrong with the code? No error appears.
Thanks a lot, and if you need more information feel free to ask for it.
UPDATE
<div class="container cities">
<div class="columns">
<a href="/{{$locale}}/contact#bcn" class="column is-4 city city-1 red click-preloader scroller" data-scroller="bcn">
<img src="/assets/img/contact/city-1.gif" alt="Barcelona">
<div>Barcelona.</div>
</a>
<a href="/{{$locale}}/contact#mad" class="column is-4 city city-2 green click-preloader scroller" data-scroller="mad">
<img src="/assets/img/contact/city-2.gif" alt="Madrid">
<div>Madrid.</div>
</a>
<a href="/{{$locale}}/contact#mex" class="column is-4 city city-3 blue click-preloader scroller" data-scroller="mex">
<img src="/assets/img/contact/city-3.gif" alt="México">
<div>@include('includes.trans',['es'=>'México', 'en'=>'Mexico']).</div>
</a>
</div>
</div>
JQUERY:
$(document).ready(function() {
$(".scroller").click(function (){
var dataScroller = $(this).data('scroller');
$('html, body').animate({
scrollTop: $("#" + dataScroller).offset().top
}, 2000);
});
});