How to get a clicked accordion tab to be opened at the top of your screen?

Question

I'm using the Zurb's Foundation framework for creating a responsive web-app. One thing I'm stuck, but I really wish to implement is when a user clicks an accordion tab (example: Zurb's site), I want the to be opened (& clicked) tab to be 'scrolled' to the top of the screen and then be openend, instead of when clicked somewhere on your screen, it opens from that point.

Simply said: When an accordion tab is clicked, the page should scroll so the clicked element is positioned at the top of the page (with +20px offset).

Thanks!

Answer 1

I've never heard of Zurb before, but you need to modify the function that adds/removes the active class. See the code here: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.accordion.js

I recommend changing line 33 from this:

target.addClass(settings.active_class);

to this

$('html, body')
    .animate({ scrollTop: target.offset().top }, 2000)
    .promise()
    .done(function() {
        target.addClass(settings.active_class);
    });

But I haven't tried it so I don't know if it will actually work D:

It should take 2 seconds (look for the 2000) to scroll, and when that's done, add the class like before