javascript - 滚动到元素顶部单击 Accordion jQuery

标签 javascript jquery

我正在制作一个 Accordion ,一切正常,问题是每个元素的内容都很大,我无法使元素在标题顶部滚动以从单击的元素顶部开始阅读,我正在尝试使用 jQuery animate 但不起作用。

HTML

<dl class="FrecuentlyAsked">
  <dt>
    <h1 data-accordian-title="#accordian-1">Title</h1>
  </dt>
    <dd id="accordian-1">
       Content goes here
    </dd>
  <dt>
    <h1 data-accordian-title="#accordian-2">Title 2</h1>
  </dt>
    <dd id="accordian-2">
       Content goes here
    </dd>     
<dl>

这是我的代码:

// Accordian
function closeAccordion() {
    $('.FrecuentlyAsked dt h1').removeClass('active');
    $('.FrecuentlyAsked dd').slideUp(300);
}

$('.FrecuentlyAsked dt h1').click( function() {
    var currentVal = $(this).attr('data-accordian-title');

    if ($(this.target).is('.active')) {
        closeAccordion();
    } else {
        closeAccordion();
        $(this).addClass('active');
        $('.FrecuentlyAsked  ' + currentVal).slideDown(300); 
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    }
});

JS fiddle Here

希望大家能帮帮我 问候!

最佳答案

使用下面的代码更新您的 closeAccordion() 方法,它将正常工作

function closeAccordion() {
   $('.FrecuentlyAsked dt h1').removeClass('active');
   $('.FrecuentlyAsked dd').slideUp(0);
}

关于javascript - 滚动到元素顶部单击 Accordion jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33931885/

相关文章:

javascript - 模拟Chrome和IE中的加载效果

javascript - BootStrap 和 jQuery-UI DatePicker 的冲突

javascript - 在图像 css 的右上角显示带有黑色覆盖的图标

jquery - 了解 jquery `show` 和 `hide` 方法中的三元运算符。

c# - 有没有办法让在 VS 2005 中创建的 ASMX Web 服务接收和返回 JSON?

javascript - 如何阻止ajax重复之前的请求?

javascript - 单击 jquery 添加类时屏幕闪烁

javascript - 将方法插入 jQuery 插件

javascript - 无法让 JQuery 删除一个类

jquery - 在 Firefox 中将图像或 div 附加到鼠标光标