javascript - 动画scrollTop在Chrome上不起作用？

我使用这样的锚元素：

<div class="my_centered" id="index_scroll_down_button">
    <a href="#" onclick="smooth_scroll('#intro')">
        <img src="/static/img/scroll-down-icon.png">
    </a>
</div>

<div class="indexcontainer container" id="intro">
</div>

smooth_scroll函数定义为：

function smooth_scroll(target){
    $('html, body').animate({
        scrollTop: $(target).offset().top - 60
    }, 800);
}

这种方法在Safari上效果很好，但在Chrome上似乎不起作用？
这是我的CSS：

#index_scroll_down_button {
   position: absolute;
   bottom: 0px;
   left: 50%;
   margin-left: -30px;
}

最佳答案

该脚本可以正常运行，但是您必须阻止默认的锚定单击事件，以使用以下情况：

<a href="#" onclick="smooth_scroll('#intro'); return false;">

但是，请尝试删除嵌入的脚本并执行以下操作：

$('[data-scrollto]').on('click', function(e) {
    e.preventDefault();
    var target = $( $(this).data('scrollto') );
    $('html, body').animate({
        scrollTop: target.offset().top - 60
    }, 800);
});

#intro {
    border-bottom: 1px solid black;
}
#content {
    height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
    Intro
</div>
<div id="content">
    Content height 1000px.
</div>
<div class="my_centered" id="index_scroll_down_button">
    <a href="#" data-scrollto="#intro">
        Scroll top
    </a>
</div>

也在JSFiddle上。

关于javascript - 动画scrollTop在Chrome上不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43552870/