В своем блоге я решил оформить подзаголовки статей в виде оглавления. Расположенные вверху страницы ссылки на части статьи помогут читателю быстро найти нужный раздел и перейти к нему.

HTML

Для работы скрипта необходимо каждому элементу заголовка задать одинаковый класс (в моем примере topic) и присвоить идентификатор (необходимо для перехода по ссылке).

<div id="main">
<h2 id="topic1" class="topic">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum luctus nisl in volutpat. Donec a sapien magna, non mollis quam…</p>
<h3 id="topic2" class="topic">Aliquam mollis cursus neque</h3>
<p>Aliquam mollis cursus neque, at sodales mauris tincidunt nec. Nunc a metus a quam blandit dapibus. In pellentesque orci quis lectus porttitor laoreet…</p>
<h3 id="topic3" class="topic">Vivamus dictum</h3>
<p>Vivamus dictum, purus ac gravida feugiat, sapien enim iaculis diam, nec fringilla leo velit in nulla…</p>
<h2 id="topic4" class="topic">Mauris tristique</h2>
<p>Mauris tristique justo vitae massa molestie sit amet tempor odio bibendum. Aliquam non ornare erat. Praesent a elit lectus…</p>
...
</div>

CSS

ul.contents {
	list-style: none;
	float: right;
	background-color: #000;
	padding: 0 0 20px 20px;
	margin: 0 0 20px 20px;
	border-bottom:1px solid #444;
	border-left:1px solid #444;
}

ul.contents li.content_h2 {
	font-size: 16px;
}

ul.contents li.content_h3 {
	padding-left: 20px;
	font-size: 14px;
}

Mootools Class

var Contents = new Class(
{
	Implements: [Options],

	options: {
		className : 'topic'
	},

	initialize : function(container, options) {
		
		this.container = $(container);

		if (!$defined(this.container))
			return false;
		
		this.setOptions(options);
		this.elements = this.container.getElements('.' + this.options.className);
		
		if (this.elements.length > 0)
			this.initContent();
	},

	initContent : function()
	{
		var that = this;
	
		var ul = new Element('ul', {'class' : 'contents'}).inject(that.container, 'top');
		
		this.elements.each(function(element) {
			new Element('a', {
				'href': '#' + element.get('id'),
				'text': element.get('text')}
			).inject(
				new Element('li', {
					'class' : 'content_' + element.get('tag')
				}).inject(ul)
			);
		});
	}
	
});

Использование

window.addEvent('domready', function(){
	new Contents('main', {
		className : 'topic'
	});
	new SmoothScroll();
});

Здесь main - идентификатор статьи, в опциях можно изменить имя класса подзаголовков.
Скрипт генерирует содержание статьи в виде списка contents, элементы которого имеют классы content_h2, content_h3.

Для плавных переходов по ссылкам внутри страницы используйте библиотеку SmoothScroll.

Демо
Скачать