Jquery:滚动不工作

Question

我有这样的代码：

<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>

在页面的底部，我有3个带有ids的div：bcn、mad和mex。

我试着用jQuery做这件事：

$('#tobcn').click = function () {
     $(document).scrollTo('#bcn');
} 

当我单击时，转到href的URL但不滚动。

密码怎么了？没有出现错误。

非常感谢，如果你需要更多的信息，可以随时索取。

更新

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

     });

Answer 1

试试下面的代码：

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

这将通过文档动态地工作。

更新

您可以在另一个页面使用相同的代码来处理它。只需遵循以下步骤：

1)使用相同的JQuery代码

2)使用scroller类和数据属性，例如：<a href="/{{$locale}}/contact#VALUE" class="scroller" data-scroller="VALUE">，用要滚动到的元素id替换VALUE。

对于其他页面，请使用下面的JQuery代码：

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