javascript - 将 Accordion 选项卡滑动到浏览器顶部

Question

我有一个内容很长的 Accordion 菜单。所以我需要在 Accordion 内容打开时实现滑动效果。

目前，如果您打开前两个菜单项，那么最后一个元素会显示视口(viewport)下方的内容，因此我需要为 Accordion 菜单项设置向上滑动效果。

这是我的代码

$(document).ready(function () {
    //Accordion
    $(".menu_body").hide();
    //toggle the componenet with class menu_body
    $(".menu_head").click(function(){
        $(this).next(".menu_body").slideToggle(400); 
        var plusmin;
        plusmin = $(this).children(".plusminus").text();

        $(this).children("span.down-arrow").toggleClass("up-arrow");        
    });

});

DEMO

解释:

看到会有 N 个 Accordion 菜单项，表格数据很长。它应该允许我们打开多个选项卡。

目前它工作正常，但问题是当您单击页面底部的菜单项时，它会向下显示内容，因此您将无法看到它，除非您手动向下滚动。

这就是为什么我需要菜单来自动滑动滚动到浏览器的顶部，以便一眼就能看到内容。

Answer 1

我会计算点击按钮的偏移量并将整个页面滚动到那个位置 为了美观而减去一些像素 (100):

DEMO

$(function () {

    //Accordion
    $(".menu_body").hide();
    //toggle the componenet with class menu_body
    $(".menu_head").click(function(){
        var thisPOsTop = $(this).offset().top - 100;
        $(this).next(".menu_body").slideToggle(400); 
        var plusmin = $(this).find(".plusminus").text();        
        $(this).find("span.down-arrow").toggleClass("up-arrow");
      $('html, body').stop().animate({scrollTop: thisPOsTop});
    });

});