short script written for vendor to enhance an complex interface

gistfile1.js

/**
 * For the day job, pay it no mind
 */
(function () {
if (document.getElementById('quicktabs-5')) {

var faculty = $('.faculty-name'),
    rootBlock = $('#block-block-12'),
    nameOuter = rootBlock.find('> div > div').eq(0),
    letters = {}, alpha = '', listItems = '', node,
    navList = document.createElement('ul');

nameOuter.parent()[0].style.position = 'relative';

// change id to whatever matches your naming scheme and style as needed
navList.id = 'faculty-alpha-nav';

/* --------------------------------------------------------------
 * -- START TEST-ONLY SECTION
 * -- All style stuff that follows should be in CSS, not here */

// this was just a quick way to demonstration/dev in the console
var style = document.createElement('style');
style.type = 'text/css';

/* TESTING
 * SET THESE PROPERTIES IN CSS IN PLACE OF CURRENT DISPLAY:NONE
 *   I don't understand what is going on with this, and don't
 *   and don't have time to work it out, but would suggest there 
 *   is almost certainly a better solution to whatever problem 
 *   this was meant to solve. It is very odd.
 */ 
style.innerHTML = '.page-patient-care-faculty-staff #content-area { position: absolute; left: -99999em; display: block }\n ';

// these styles are for testing only, standard drupal search pager 
// styling would be better for the real thing
style.innerHTML += '#faculty-alpha-nav { padding:0 !important;list-style:none;float:left;clear:right } #faculty-alpha-nav li { width: 1.2em; margin-left:2px;height:1em;float:left;cursor:pointer;border:1px solid #444;text-align:center;padding-bottom:3px } #faculty-alpha-nav li:hover { color:#aaa;background:#000 } #faculty-alpha-nav + div { clear:both !important }';

document.getElementsByTagName('head')[0].appendChild(style);
/* --------------------------------------------------------------
 * -- END TEST-ONLY SECTION 
 * -- everything below this line is required
 */

// we need to build a hash of jQuery objects that each contain a reference
// to the outer most div that surrounds a single faculty name, in each case
// it will be the first name to begin with that letter, A-Z
    faculty.each(function() {
        var alpha = $(this).text().charAt(0);
        if (!letters[alpha]) {
            node = $(this.parentNode.parentNode.parentNode.parentNode);
            node.buttonEl = $(this.parentNode.parentNode.parentNode); // store a reference to the node that the event listeners appear to be attached to for the ajax stuff, unfortunately, synthetic events don't bubble in jQuery before 1.3, or we could just store $(this). We'll trigger a click on this after scrolling to it
            if (node.parent().css('display') != 'none')
                letters[alpha] = node;
        }
    });

// next we create a list item for each letter that exists
    for (prop in letters) {
        if (Object.prototype.hasOwnProperty.call(letters, prop)) {
            listItems += '<li>' + prop + '</li>';
        }
    }
    
    navList.innerHTML = listItems;
    // overwrite the reference to the UL node with a jQuery object containing it
    navList = $(navList);
    // and insert it into the DOM after the block title
    rootBlock.find('h2').eq(0).css('float', 'left').after(navList);

// we need a function to do the scrolling
    function scrollTo(container, stopAt) {
        if (!!stopAt[0].offsetParent) {
            container.animate({scrollTop: stopAt.position().top}, 333);
            // the same event should trigger adding and removing the button active
            // class. It doesn't at the moment, but this would be an easy fix.
            return stopAt.buttonEl.trigger('click');
        }
    }
    
    // there's no event delegation in the version of jQuery that ships with Drupal,
    // but for clicks it is very simple to do
    navList.bind('click', function(e) {
        if (e.target.nodeName.toLowerCase() == 'li')
            return scrollTo(nameOuter, letters[e.target.innerHTML])
    });
}
}());