A small class that creates a list of page-scrolling anchors based on sections with data-nav-title set.

jquery.anchorNavigation.js

function anchorNavigation(el) {
    var self = this;
    this.$el = jq(el);
    this.$navigableItems = jq('[data-nav-title]');
    
    this.$el.append('<ul />');
    
    this.$navigationList = this.$el.find('ul');
    this.navigationItems = [];
    
    self.populateNavigation();
}

anchorNavigation.prototype.populateNavigation = function() {
    var self = this;
    // Map this.navigableItems, rendering each item into this.el
    this.$navigableItems.map(function() {
       var title = jq(this).data('nav-title');
       var newItem = self.$navigationList.append('<li><a href="javascript:void(0);">' + title + '</a></li>');
      this.id = self.parseStringToId(title);
    });
    self.refreshItems();
    
}

anchorNavigation.prototype.refreshItems = function() {
    this.navigationItems = this.$el.find('li');
    this.registerEvents();
}

anchorNavigation.prototype.registerEvents = function() {
    var self = this;
    self.navigationItems.click(function(e) {
        e.preventDefault();
        var $this = jq(this);
        var title = $this.find('a').text();
        var scrollId = self.parseStringToId(title);
        self.scrollToItem(scrollId);
    });
        
}

anchorNavigation.prototype.scrollToItem = function(id) {
    jq('html,body').animate({
        scrollTop: jq('#' + id).offset().top
    }, 'slow');
}

anchorNavigation.prototype.parseStringToId = function(string) {
    return string.replace(/[\s\?\(\)]+/g, '').toLowerCase();
}