Вставьте вкладку аккордеона в верхнюю часть браузера

Question

У меня есть меню аккордеона с очень длинным контентом. Поэтому мне нужно реализовать эффект слайда при открытии содержимого аккордеона.

В настоящее время, если вы открываете первые два пункта меню, последний элемент отображает содержимое под окном просмотра, поэтому мне нужно иметь эффект слайда для элементов меню аккордеона.

Вот мой код

$(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 количество пунктов меню аккордеон с очень длинными данными таблицы. И это должно позволить нам открыть несколько вкладок.

В настоящее время он работает нормально, но проблема заключается в том, когда вы нажимаете на элемент меню, который находится внизу страницы, он показывает содержимое вниз, чтобы вы не смогли его увидеть, если вы не прокрутите вниз вручную.

Вот почему мне нужно меню для автоматического прокрутки в верхней части браузера, чтобы содержимое отображалось с одного взгляда.

Answer 1

Я бы вычислить щелкнул кнопку offset и прокручивать всю страницу этой позиции минус некоторое количество пикселей (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}); 
    }); 

}); 

Answer 2

Это мой обновленный jsbin который отлично работает. код, как показано ниже:

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

}); 

Answer 3

Как о попытке автоматической прокрутки для конкретного элемента? Этот «метод» может срабатывать всякий раз, когда вы выбираете элемент гармоник.

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

Приведенный выше код завершит анимацию за 2 секунды (2000 мс), но вы можете это изменить.

This JS Bin похоже, что именно вы ищите.

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