Прокрутка до определенного элемента в таблице

Question

Если таблица, где каждая строка имеет свой id так же есть ряд элементов с ссылками содержащими id -

href ='"#"+id'

При нажатии на элемент таблица скролится к элементу строки таблицы. Использую я для этого такой скрипт:

$(document).ready(function () {
    $('.a').click(function () {
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) {
            $('html, body').animate({scrollTop: $(scroll_el).offset().top}, 500);
        }
        return false;
    });
});

И у меня 2 проблемы:

1. Скрипт срабатывает 1 раз(закидывает в адресную строку #id), и больше при нажатии ничего не происходит.
2. Скрипт работает не плавно, а мгновенно (все файлы js подключены и обновлены, всё остальное работает)

Answer 1

Я так обычно решаю (без проверки, а по фильтру+data):

$('.link').on('click', function(e){
  e.preventDefault();
var link = $(this).attr('href');
var dir = link.replace(/#/, ''),
      section = $('.section').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top;
$('html, body').animate({scrollTop: pos}, 1000);
});

.section  {
  height: 500px;
  border: 1px solid #ccc;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>

  <div class="section" data-section="item-1">1</div>
  <div class="section" data-section="item-2">2</div>
  <div class="section" data-section="item-3">3</div>

С таблицей:

$('.link').on('click', function(e){
  e.preventDefault();
var link = $(this).attr('href');
var dir = link.replace(/#/, ''),
      section = $('tr').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top;
$('html, body').animate({scrollTop: pos}, 1000);
});

tr  {
  height: 500px;
  border: 1px solid #ccc;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>


<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>

<table>
  <tr data-section="item-1">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-2">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-3">
    <td>td</td>
    <td>td</td>
  </tr>
</table>

Вариант с таблицей и до середины ячейки:

$('.link').on('click', function(e){
  e.preventDefault();
var link = $(this).attr('href');
var dir = link.replace(/#/, ''),
      section = $('tr').filter('[data-section="' + dir + '"]'),
      pos = section.offset().top +section.height()/2;
$('html, body').animate({scrollTop: pos}, 1000);
});

table {
  width: 100%;
}

tr  {
  height: 500px;
  background: #ccc;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>


<a href="#item-1" class="link">item-1</a>
<a href="#item-2" class="link">item-2</a>
<a href="#item-3" class="link">item-3</a>

<table>
  <tr data-section="item-1">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-2">
    <td>td</td>
    <td>td</td>
  </tr>
   <tr data-section="item-3">
    <td>td</td>
    <td>td</td>
  </tr>
</table>