Jquery: Scroll not working

Question

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

     });

That's not how you add a click handler in jQuery http://api.jquery.com/click. Your logic for scrolling to the element isn't correct either, as there's no `scrollTo()` function. You need to implement that yourself. See the duplicate for more info — Rory McCrossan, Aug 22 '17 at 13:06

AddWeb Solution Pvt Ltd · Answer 1 · 2017-08-22T14:40:13.710

0

Try below code:
HTML :

<div class="container citiestop">
    <div class="columns">
        <a href="/{{$locale}}/contact#bcn" class="column is-4 citytop city-1-top red click-preloader scroller" data-scroller="bcn">
            <div id="tobcn">Barcelona.</div>
        </a>
        <a href="/{{$locale}}/contact#mad" class="column is-4 citytop city-2-top green click-preloader scroller" data-scroller="mad">
            <div id="tomadrid">Madrid.</div>
        </a>
        <a href="/{{$locale}}/contact#mex" class="column is-4 citytop city-3-top blue click-preloader scroller" data-scroller="mex">
            <div>@include('includes.trans',['es'=>'México', 'en'=>'Mexico']).</div>
        </a>
    </div>
</div>

JQuery:

$(".scroller").click(function (){
    var dataScroller = $(this).data('scroller'); 
    $('html, body').animate({
        scrollTop: $("#" + dataScroller).offset().top
    }, 2000);
});

This will work dynamically through document.

UPDATE
You can use the same code at another page to work it. Just follow below steps:

1) Use same JQuery code
2) Use scroller class and data attribute like: <a href="/{{$locale}}/contact#VALUE" class="scroller" data-scroller="VALUE">, replace VALUE with your element id which you want to scroll to.

For other page, use below JQuery code:

$(document).ready(function() {
    //Scroll for opened page having hash value...
    if(window.location.hash){
        var dataScroller = window.location.hash.substr(1);          
        $('html, body').animate({
            scrollTop: $("#" + dataScroller).offset().top
        }, 2000);
    }

    //Scroll for sam page event...
    $(".scroller").click(function (){
        var dataScroller = $(this).data('scroller'); 
        $('html, body').animate({
            scrollTop: $("#" + dataScroller).offset().top
        }, 2000);
    });
});

edited Aug 22 '17 at 14:40

answered Aug 22 '17 at 13:15

AddWeb Solution Pvt Ltd

21,025
5
26
57

Hi. If the html it's in the same blade than the id bcn,mad,mex works perfectly, but if it's on other blade go to /{{$locale}}/contact#id but don't make the scroll. – Lluís Puig Ferrer Aug 22 '17 at 13:40
@LluísPuigFerrer: As I mentioned, *This will work dynamically through document.*, just use same JQuery code and add `scroller` as class and `data-scroller="YOUR#VALUE"` into``. It should work for other too. – AddWeb Solution Pvt Ltd Aug 22 '17 at 13:43
Scroller is on class in your code too, i try it putting the value in data-scroller but don't work. Can you edit your answer and put one example? Thanks a lot – Lluís Puig Ferrer Aug 22 '17 at 13:47
@LluísPuigFerrer: Check my *UPDATE* – AddWeb Solution Pvt Ltd Aug 22 '17 at 13:58
Not working, maybe I can't see the error on my code, I update the question with my code. Sorry and please check it – Lluís Puig Ferrer Aug 22 '17 at 14:02
Check your browser console for JS error? – AddWeb Solution Pvt Ltd Aug 22 '17 at 14:12
I check it, any error appears. – Lluís Puig Ferrer Aug 22 '17 at 14:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152536/discussion-between-addweb-solution-pvt-ltd-and-lluis-puig-ferrer). – AddWeb Solution Pvt Ltd Aug 22 '17 at 14:14

Jquery: Scroll not working

1 Answers1