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 个带有 id 的 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>

查询：

$(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">，将 VALUE 替换为您的元素 ID您要滚动到的位置。

其他页面，使用下面的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);
    });
});