Frage

I have combined a search function with a jQueryUI accordion.
The search function highlights the title of every section that the inputted search term is found. I am trying to figure out a way to have the viewport scroll to the first occurrence of a found term when a section is opened, saving the user having to scroll through potentially very long content.
Each highlighted term is wrapped in <span class="highlight"&gt;term&lt;/span>. I have got to the point where I've added an onclick="jumpTo(chapter_number)" handler to each section header when a term is found within it. I just need help with the jumpTo function. Thank you!

Here's my fiddle: http://jsfiddle.net/jameshuckabonetech/YsdDn/

P.S. Fiddle is great! First one ...

UPDATE Finished working code ...

$( "#accordion" ).accordion(
{
    autoHeight: false, collapsible: true, active: false,
    activate:function(event, ui )
    {
        if ($(ui.newPanel).find('.highlight').length>0 && $("#jump-box").prop('checked') == true)
            $('html, body').animate(
            {
                scrollTop: $(ui.newPanel).find('.highlight').offset().top
            }
            , 2000);
    }
});
War es hilfreich?

Lösung

Don't use onclick use the accordion's activate event.

$( "#accordion" ).accordion({
    autoHeight: false, collapsible: true, active: false,
    activate:function(event, ui ){
       if ($(ui.newPanel).find('.highlight').length>0)
          $('html, body').animate({
              scrollTop: $(ui.newPanel).find('.highlight').offset().top
              }, 2000);
    },
    beforeActivate:function(e,ui)
    {
        //if statement to check if you want to stop the accordion from opening
        e.preventDefault();
    }
});

Used the scrolling code from jQuery scroll to element

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top