Плавный scroll по

jQuery(document).ready(function(){
    $("h3").each(function(i){
    var ctx = $(this);
        $("<a />", {href:"javascript:;", text: $(this).text()}).appendTo(".nav").click(function(){
            jQuery("html, body").stop().animate({scrollTop:ctx.offset().top-15}, '300', 'swing', function() {});        
        });
    });
});

.nav{
        width: 30%;
        position: fixed;
        display: inline-block;
    }

    .nav a{
        display: block;
    }

    .text_post{
        margin-left: 32%;
        width: 67%;
        display: inline-block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav"></div>

<div class="text_post">
    <h1>Название статьи</h1>

    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 

    <h3>Первый заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Второй заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Третий заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Четвертый заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
</div>

let tags = document.querySelectorAll('h3')
let nav = document.querySelector('.nav')

for(let tag of tags) {
  let a = document.createElement('a')
  a.href = '#'
  a.innerHTML = tag.innerHTML
  nav.append(a)  
  a.addEventListener('click', e => {
    e.preventDefault()
    tag.scrollIntoView({behavior: 'smooth'})
  })
}

body {
height: 2000px;
}
.nav{
    width: 30%;
    position: fixed;
    display: inline-block;
}

.nav a{
    display: block;
}

.text_post{
    margin-left: 32%;
    width: 67%;
    display: inline-block;
}

<div class="nav">
    </div>
    
    <div class="text_post">
    
    <h1>Название статьи</h1>
    
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    
    <h3>Первый заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Второй заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Третий заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    <h3>Четвертый заголовок</h3>
    Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... Текст... текст... 
    </div>