[Vuejs]-Jquery: Scroll not working

by

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

Leave a comment