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

凯文格兰特

单击导航项时,我希望相关 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>
三十点

问题是这一行:

$('button-widget_body').animate({

应该:

$('.button-widget_body').animate({

您想查找带有class="button-widget_body"而不是的元素<button-widget_body />

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

滚动到可滚动容器div中的元素不起作用

来自分类Dev

单击div元素不起作用

来自分类Dev

单击元素时,在可滚动div中滚动内容

来自分类Dev

滚动到可滚动div中的元素

来自分类Dev

在Div内滚动不起作用?

来自分类Dev

使div在模板内可滚动

来自分类Dev

向下滚动到单击的 DIV 不起作用

来自分类Dev

动画滚动到div内的哈希不起作用

来自分类Dev

div 内的无限水平滚动不起作用?CSS

来自分类Dev

可滚动div中的中心元素

来自分类Dev

容器内的垂直可滚动div

来自分类Dev

Mmenu-滚动到元素不起作用

来自分类Dev

Vue.js - 滚动到元素不起作用

来自分类Dev

自动滚动div不起作用

来自分类Dev

div上的自动滚动不起作用

来自分类Dev

防止位置绝对元素粘贴在可滚动div内

来自分类Dev

防止位置绝对元素粘在可滚动div内

来自分类Dev

jQuery单击以滚动到最简单的div.class并显示不起作用

来自分类Dev

表格单元格中的可滚动div不起作用

来自分类Dev

使用animate()滑动div元素不起作用

来自分类Dev

(jQuery)当滚动显示div时,如何为可滚动div中的元素设置动画?

来自分类Dev

(jQuery)当滚动显示div时,如何为可滚动div中的元素设置动画?

来自分类Dev

滚动事件不会在可滚动 div 内的 div 上触发

来自分类Dev

单击使用平滑滚动条可移至Div

来自分类Dev

使div可滚动

来自分类Dev

使内部 div 可滚动

来自分类Dev

jQuery在div单击时无法滚动到元素的顶部

来自分类Dev

使div可滚动不在div中滚动

来自分类Dev

jQuery检查元素在可滚动div中是否可见