Если на чистом js, то получается немного многословно. Во-первых, нам понадобятся вспомогательные функции для осуществления плавного скролла.
Кроссбраузерная функция определения текущей позиции:
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if(self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if(document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if(document.body.scrollTop) return document.body.scrollTop;
return 0;
}
Функция определения позиции элемента, к которому будем скроллить:
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while(node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
}
return y;
}
Функция осуществляющая плавный скролл:
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if(distance < 100) {
scrollTo(0, stopY);
return;
}
var speed = Math.round(distance / 100);
if(speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if(stopY > startY) {
for(var i=startY; i<stopY; i+=step) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY;
timer++;
}
return;
}
for(var i=startY; i>stopY; i-=step) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step;
if(leapY < stopY) leapY = stopY;
timer++;
}
}
Во-вторых, нужно подготовить данные, с которыми будем эксперементировать:
<nav id="n"></nav>
<table id="t">
<tr>
<th>Буква</th>
</tr>
</table>
a {
margin-right: 5px;
}
var table = document.getElementById('t'); //Таблица с буквами
var nav = document.getElementById('n'); //Контейнер, содержащий ссылки на строки таблицы
var chars = 'abcdefghigklmnopqrstuvwxyz';
for(var i = 0; i < chars.length; i++) {
var a = document.createElement('a');
a.setAttribute('href', '#' + chars[i]);
a.innerHTML = chars[i];
nav.appendChild(a);
for(var x = 0; x < 25; x++) { //Для наглядности увеличим количество строк в таблице в 25 раз
var tr = document.createElement('tr');
var td = document.createElement('td');
var text = document.createTextNode(chars[i] + x);
if(x == 0) { //На каждую первую строку с буквой назначим якорь
var a = document.createElement('a');
a.setAttribute('name', chars[i]);
a.setAttribute('id', chars[i]);
a.appendChild(text);
td.appendChild(a);
}
else {
td.appendChild(text);
}
tr.appendChild(td);
table.appendChild(tr);
}
}
Наконец та часть кода, которая является ответом на ваш вопрос:
for(var i = 0; i < nav.childNodes.length; i++) {
nav.childNodes[i].addEventListener('click', function(event) {
event.preventDefault();
var href = this.getAttribute('href');
var id = href[1];
smoothScroll(id);
});
}
Обработчик можно было навешивать и при создании ссылок, но я вынес это в отдельный блок кода для наглядности.
Посмотреть в действии можно здесь
https://jsfiddle.net/TheDeadOne/19fx7fcn/1/ 
