Adding ScrollTo in the jQuery UI Accordion script

I've search high and low and have not found a post that has helped my specific situation. I am new to jQuery and love its wide range of uses. I have an issue with my accordion script and I need to add the ScrollTo so that when a section if selected it scrolls the window up if it is above the view. I hope this makes sense. Thank you for the help.

<script type="text/javascript">
        /* <![CDATA[ */
        jQuery().ready(function(){
            jQuery('#leftnav-navigation').accordion({
                active: false,
                header: '.head',
                navigation: true,
                collapsible: true,
                animated: 'easeslide',
                autoheight: false,
                alwaysOpen: false,
            });

            var accordions = jQuery('#leftnav-navigation'); 

            jQuery('#switch select').change(function() {
                accordions.accordion("activate", this.selectedIndex-1);
            });
            jQuery('#close').click(function() {
                accordions.accordion("activate", -1);
            });
            jQuery('#switch2').change(function() {
                accordions.accordion("activate", this.value);
            });
            jQuery('#enable').click(function() {
                accordions.accordion("enable");
            });
            jQuery('#disable').click(function() {
                accordions.accordion("disable");
            });
            jQuery('#remove').click(function() {
                accordions.accordion("destroy");
                wizardButtons.unbind("click");
            });
            return false;
        });
        /* ]]> */
    </script>

Thanks to ckaufman for his help. Here is the final working code. I hope this helps someone in need.

<script type="text/javascript">
        /* <![CDATA[ */
        jQuery().ready(function(){
            jQuery('#leftnav-navigation').accordion({
                a开发者_如何学运维ctive: false,
                header: '.head',
                navigation: true,
                collapsible: true,
                animated: 'easeslide',
                autoheight: false,
                alwaysOpen: false,
            });

            var accordions = jQuery('#leftnav-navigation'); 

            jQuery('#switch select').change(function() {
                accordions.accordion("activate", this.selectedIndex-1);
            });
            jQuery('#close').click(function() {
                accordions.accordion("activate", -1);
            });
            jQuery('#switch2').change(function() {
                accordions.accordion("activate", this.value);
            });
            jQuery('#enable').click(function() {
                accordions.accordion("enable");
            });
            jQuery('#disable').click(function() {
                accordions.accordion("disable");
            });
            jQuery('#remove').click(function() {
                accordions.accordion("destroy");
                wizardButtons.unbind("click");
            });

            jQuery('#leftnav-navigation').click(
                function() {
                    var window_top = $(window).scrollTop();
                    var div_top = $(this).offset().top;
                        if (window_top > div_top){
                            $('html, body').animate({scrollTop:div_top}, 300);
                }
            });

            return false;
        });
        /* ]]> */
    </script>

---

I think something along these lines may work. I'll explain and maybe with some tweaking you can implement it.

jQuery('#divID').click(
  function() {
  var window_top = $(window).scrollTop();
  var div_top = $(this).offset().top;
     if (window_top > div_top){
     $('html, body').animate({scrollTop:div_top}, 300);
     }
    });

The click binds the event which will detect the 'div_top' and 'window_top'... If the div is above the window_top it will scroll to the location of div_top. Worth a try, hope it helps.

---

Actually, I have already done this...

You need to add jQuery's scrollTo.js to your project, and then replace the ui.accordion.js file with the one in the JSFiddle provided: http://jsfiddle.net/Jaybles/6EWAF/