Javascript 将“手风琴”选项卡滑动到浏览器顶部

我有一份手风琴菜单，内容很长。所以我需要在打开手风琴内容时实现幻灯片效果

当前，如果打开前两个菜单项，那么最后一个菜单项将显示视口下方的内容，因此我需要为手风琴菜单项提供向上滑动效果

这是我的密码

$(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");        
    });

});

$(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});
    });

});

说明：

请参阅，将有N个具有很长表格数据的手风琴菜单项。它应该允许我们打开多个选项卡

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

---

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

这是我更新的，效果很好。 代码如下：

$(".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");

  var scrollvalue = $(this).offset().top;
  console.log(scrollvalue);
  setTimeout(function(){
  $(window).scrollTop( scrollvalue );
  },500);

});

---

这是我的更新版，运行良好。 代码如下：

$(".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");

  var scrollvalue = $(this).offset().top;
  console.log(scrollvalue);
  setTimeout(function(){
  $(window).scrollTop( scrollvalue );
  },500);

});

---

尝试自动滚动到特定元素怎么样？每当您选择一个手风琴元素时，此“方法”就会触发

$('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);

上面的代码将在2秒（2000毫秒）内完成动画，但您可以将其更改为任何内容

看起来正是你要找的

$('.menu_head').click(function() {
    $('html, body').animate( { scrollTop:$(this).offset().top }, 400);
});

---

尝试自动滚动到特定元素怎么样？每当您选择一个手风琴元素时，此“方法”就会触发

$('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);

上面的代码将在2秒（2000毫秒）内完成动画，但您可以将其更改为任何内容

看起来正是你要找的

$('.menu_head').click(function() {
    $('html, body').animate( { scrollTop:$(this).offset().top }, 400);
});

---

我将计算单击的按钮的偏移量，并将整个页面滚动到该位置 减去一定数量的像素（100）只是为了美观：

$(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});
    });

});

---

我将计算单击的按钮的偏移量，并将整个页面滚动到该位置 减去一定数量的像素（100）只是为了美观：

$(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});
    });

});

---

如果你对jQuery UI感兴趣，那么看看这个如果你对jQuery UI感兴趣，那么看看这个我需要打开多个菜单，这样就不能一次只限制一个，你到底想做什么？你能详细解释一下吗？我需要打开多个菜单，这样就不能一次只限制一个菜单，你到底想做什么？你能详细解释一下吗？