JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.css">
<div class="priceLinksBoxList">
  <a href="#price_scroll_1">Арматура A1</a>
  <a href="#price_scroll_2">Арматура A3</a>
</div>

<div class="table-box">
  <table>
    <tr>
      <th class="p-2">Наименование</th>
      <th class="p-3">Изготовитель</th>
      <th class="p-4">Вес, кг/шт.</th>
      <th class="p-5">Цена</th>
    </tr>
  </table>
  <div class="fixed-table">
    <table>
      <tr class="price-header" id="price_scroll_1">
        <td colspan="4">
          <a href="#" title="">Арматура A1</a>
        </td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 6 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">27 000</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 8 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">27 500</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 10 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">26 800</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 12 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">25 700</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 14 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">24 800</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 16 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
        <td class="p-5">26 100</td>
      </tr>
      <tr>
        <td class="p-2">Арматура А1 18 мм</td>
        <td class="p-3">Северсталь</td>
        <td class="p-4">тонна</td>
...

CSS

.table-box .fixed-table {
  max-height: 450px;
  overflow: hidden;
  position: relative;
}

.table-box table {
  background-color: #fff;
  width: 100%;
  border: 1px solid #CDCDCD;
  border-collapse: collapse;
  margin: 0;
  font-family: Arial, Tahoma, sans-serif;
  table-layout: fixed;
}

.table-box table th,
.table-box table td {
  border: none;
  border-bottom: 1px solid #aaa;
  font-size: 13px;
  line-height: 1.2em;
  padding: 5px;
  text-align: center;
}

.price-header td {
  padding: 0 !important;
}

.table-box table tr:hover td {
  background-color: #DAF2FF;
}

.table-box table th {
    background: #575757 none repeat scroll 0 0;
    color: #fff;
    font-weight: bold;
    vertical-align: top;
    padding: 10px 5px;
}

.table-box table a {
  text-decoration: none;
  color: black;
  font-size: 16px;
  display: block;
  padding: 4px;
}

.price-header td {
  background-color: #EBEEEE !important;
  text-align: left !important;
}

.ps-container > .ps-scrollbar-y-rail {
  opacity: 0.6;
}


/*.table-box tr:nth-child(2n+1) td {
    background-color: #eee;
}*/

JavaScript

var el = document.querySelector('.fixed-table');

Ps.initialize(el);


$(document).on('click', '.priceLinksBoxList a[href^="#"]', function(e) {
  e.preventDefault();
  var anchor = $(this);
  if (anchor.hasClass('selected')) {
    return false;
  } else {
    $('.fixed-table').stop().animate({
      scrollTop: $(anchor.attr('href')).offset().top
    }, 1000);
    $(this).addClass('selected').siblings().removeClass('selected');
  }
});