jQuery srollTop conundrum

Question

У меня возникла проблема с функцией scrollTop() в jQuery. В настоящий момент функция плавной прокрутки прокручивается мимо намеченного раздела, а затем возвращается назад к ней, как только функция завершается. Я включил jsFiddle в конце, но вот мой сценарий на данный момент:

HTML:

<nav id='menu2' class='menu2'> 
    <ul> 
     <li class='marker'></li> 
     <li class='item2'><a id='step1link' href='#bs1'>Baby Step 1</a></li> 
     <li class='item2'><a id='step2link' href='#bs2'>Baby Step 2</a></li> 
     <li class='item2'><a id='step3link' href='#bs3'>Baby Step 3</a></li> 
    </ul> 
    </nav> 

    <div class='content'> 
    <section class='babystep' id='bs1'> 
     <h1>Baby Step 1</h1> 
     <h5>second-title</h5> 
     <p>content</p> 
     <p>content</p> 
    </section> 

    <section class='babystep' id='bs2'> 
     <h1>Baby Step 2</h1> 
     <h5>Pay off all debt using the Debt Snowball</h5> 
     <p>content</p> 
     <p>content</p> 
    </section> 

    <section class='babystep' id='bs3'> 
     <h1>Baby Step 3</h1> 
     <h5>second-title</h5> 
     <p>content</p> 
     <p>content</p> 
    </section> 

Javascript:

$(document).ready(function() { 
    $('a').on('click', function(e) { 
    if(this.hash !== "") { 
    e.preventDefault(); 

    const hash = this.hash; 

    $('.content').animate({ 
     scrollTop: $(hash).offset().top 
    }, 800, function() { 
     window.location.hash = hash; 
     }) 
    } 
    }) 
}) 

Я попытался предложенные $ (» html, body ') вместо $ ('. content '), которому удалось выполнить прокрутку всей страницы, а не div с элементами раздела, которые нужно прокручивать.

jsFiddle: https://jsfiddle.net/hollisd09/wa67wLc1/

Answer 1

Изменить эту строку:

scrollTop: $(hash).offset().top 

в этом:

scrollTop: $(hash).offset().top - $('.content').offset().top + $('.content').scrollTop()