BornTo FreeFall

Например, вот так:

html {
    scroll-behavior: smooth;
}

Но есть одна побочка, что не все браузеры поддерживают такой подход. Зато без JS)

Либо с элементами небольшого JS кода:

// Проходимся по всем элементам "linkList", и делаем выборку по ссылкам (a с атрибутом href, который равен "#")
const anchors = document.querySelectorAll('.linkList a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
  e.preventDefault()
   
  const blockID = anchor.getAttribute('href').substr(1)
   
  document.getElementById(blockID).scrollIntoView({
  behavior: 'smooth',
  block: 'start'
  })
  })
}

Один в один - не смогу, ибо в верстке я не гуру, но что-то похожее:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul li {
  display: block;
  overflow: hidden;
  position: relative;
}

.item__name {
  display: inline-block;
  position: relative;
  
}

.item__name:after {
  content: '';
  position: absolute;
  left: 100%;
  right: -9999px;
  bottom: 0;
  border-bottom: 1px dotted #888;
}

.left {
  width: 80%;
  overflow: hidden;
  position: relative;
  float: left;
}

.item__value {
  width: 20%;
  float: right;
}

<ul>
  <li>
    <div class="left">
      <span class="item__name">Первый пункт</span>
    </div>
    <span class="item__value">Значение</span>
  </li>
  <li>
    <div class="left">
      <span class="item__name">Второй пункт</span>
    </div>
    <span class="item__value">Значение</span>
  </li>
  <li>
    <div class="left">
      <span class="item__name">Третий пункт</span>
    </div>    
    <span class="item__value">Значение</span>
  </li>
</ul>

Проверка работоспособности: Клик