javascript - 单击滚动可滚动 div 内的元素不起作用

Question

当单击导航项时，我希望相关的 div 滚动到父 div 的顶部。我目前无法让它正常工作。我目前没有看到任何错误。我仍在打字，因为似乎有一个荒谬的代码/文本规则。无论如何，这是我的代码:

$('.button-widget_scroll-nav a').on('click', function(e) {
    $('.button-widget_scroll-nav .active').removeClass('active')
    $(this).addClass('active')
    $('button-widget_body').animate({
        scrollTop: $($(this).attr('href')).position().top - 100
    },500);
    e.preventDefault();
})

 <div class="button-widget_body">
    <div id="fills" class="panel fills">
        <h3>Fills</h3>
        <a href="#" class="fill fill-up">Fill Up</a>
        <a href="#" class="fill fill-down">Fill Down</a>
        <a href="#" class="fill fill-right">Fill Right</a>
        <a href="#" class="fill fill-left">Fill Left</a>
    </div>
    <div id="outlines" class="panel outlines">
        <h3>Outlines</h3>
        <a href="#" class="fill fill-up">Fill Up</a>
        <a href="#" class="fill fill-down">Fill Down</a>
        <a href="#" class="fill fill-left">Fill Left</a>
        <a href="#" class="fill fill-right">Fill Right</a>
    </div>
    <div id="pills" class="panel pills">
        <h3>Pills</h3>
        <a href="#" class="fill fill-up">Fill Up</a>
        <a href="#" class="fill fill-down">Fill Down</a>
        <a href="#" class="fill fill-left">Fill Left</a>
        <a href="#" class="fill fill-right">Fill Right</a>
    </div>
    <div id="slots" class="panel slots">
        <h3>Slots</h3>
        <a href="#" class="fill fill-up">Fill Up</a>
        <a href="#" class="fill fill-down">Fill Down</a>
        <a href="#" class="fill fill-left">Fill Left</a>
        <a href="#" class="fill fill-right">Fill Right</a>
    </div>
    <div id="circles" class="panel circles">
        <h3>Circles</h3>
        <a href="#" class="fill fill-up">Fill Up</a>
        <a href="#" class="fill fill-down">Fill Down</a>
        <a href="#" class="fill fill-left">Fill Left</a>
        <a href="#" class="fill fill-right">Fill Right</a>
    </div>
</div>
<div class="button-widget_scroll-nav">
    <a href="#fills">Fills</a>
    <a href="#outlines">Outlines</a>
    <a href="#pills">Pills</a>
    <a href="#slots">Slots</a>
    <a href="#circles">Circles</a>
</div>

Answer 1

您是否尝试过将 e.preventDefault(); 移动到点击函数中的第一行？