Как использовать внешние ссылки для активации и анимации scrollTop на активной панели для 2 отдельных аккордеонов JQuery? - PullRequest
Новая
       17

Как использовать внешние ссылки для активации и анимации scrollTop на активной панели для 2 отдельных аккордеонов JQuery?

0 голосов
/ 05 июня 2019

Использование внешней ссылки (например, index.html? Guide = 9 # guides_accordion) для анимации scrollTop для активной панели второго аккордеона. Использование JQuery-UI v1.12.1

Если я удаляю код, относящийся к первому аккордеону, scrollTop для другого аккордеона работает нормально. 

<html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts[i].indexOf('=');
            if (parts[i].substring(0,pos) == name) {
                return parts[i].substring(pos+1);
            }
        }
    }
    return ;
}
    var default_guide = parseInt(getParam('guide'));
    var default_question = parseInt(getParam('question'));

$( function() {
    $( "#faq_accordion" ).accordion({
        collapsible: true,
        heightStyle: "content",
        active: false
    });
});

$( function() {
    $( "#guides_accordion" ).accordion({
        collapsible: true,
        heightStyle: "content",
        active: false
    });
}); 

$(function() {
    $( "#guides_accordion" ).accordion({active: default_guide});            

    $( "#faq_accordion" ).accordion({active: default_question});

    if ( default_guide != NaN ){
        $('html, body').animate({scrollTop: $('#guides_accordion').find('.ui-state-active').offset().top});
    };
    if ( default_question != NaN ) {
        $('html, body').animate({scrollTop: $('#faq_accordion').find('.ui-state-active').offset().top});    
    };      
}); 
</script>

<style>p { margin:50px; }</style>

<h2>GUIDES</h2>
<div id="guides_accordion">

<h3>Guide 1</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 2</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 3</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 4</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 5</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 6</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 7</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 8</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 9</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Guide 10</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
</div>

<h2>FAQ</h2>
<div id="faq_accordion">

<h3>Question 1</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 2</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 3</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 4</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 5</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 6</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 7</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 8</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 9</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
<h3>Question 10</h3>
<div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
</div>  

</body>
</html>

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

Ссылка на index.html? = 9 о ТП # guides_accordion работает но index.html? Вопрос = 9 # faq_accordion не работает.

...