CSS3だけでスムーズスクロール

/*一行のみで実装可能*/
html {
  scroll-behavior: smooth;
}

<style>
    /* スムーズスクロール 一行のみ */
    html{
        scroll-behavior: smooth;
    }
    /* 以下はデザイン用 */   
    #scrollsample{
        background: #fdfdfd;
        border: 1px solid #e2e2e2;
    }
    #scrollsample .menu {
        background: #eee;
        width: 100%;
        border-bottom: 1px solid #e2e2e2;
    }
    #scrollsample .menu ul {
        display: flex;
        justify-content: center;
    }
    #scrollsample .menu li {
        margin: 1rem;
    }
    #scrollsample a {
        font-size: 1.5rem;
        text-decoration: none;
        color: #37b507;
    }
    #scrollsample a:hover {
        color: #37b507;
    }
    #scrollsample .scrollmenu {
        font-size: 2rem;
        padding: 4rem 1rem 0;
        margin-bottom: 1rem;
        position: relative;
    }
    #scrollsample .scrollmenu::before, #scrollsample .scrollmenu::after {
        content: "";
        position: absolute;
        bottom: 0;
    }
    #scrollsample .scrollmenu:before {
        border-bottom: 2px solid #37b507;
        width: 80%;
    }
    #scrollsample .scrollmenu:after {
        border-bottom: 2px solid #E5E5E5;
        width: 80%;
    }
    #scrollsample p {
        line-height: 1.4;
        margin-bottom: 1rem;
        padding: 0 1rem;
    }  
    .toscrollmenu{
        display: inline-block;
        position: absolute;
        font-size: 0.7em;
        bottom: 0;
        padding-left: 5em;    
    }  
</style>
<section id="samplewrapper" style="padding-top: 30px;"></section>
    <div id="scrollsample">
        <div class="menu" id="scrollmenubar">
            <ul>
                <li><a href="#sectionA">Section A</a></li>
                <li><a href="#sectionB">Section B</a></li>
                <li><a href="#sectionC">Section C</a></li>
            </ul>
        </div>
        <div id="sectionA" class="scrollmenu">SectionA<span class="toscrollmenu"><a href="#samplewrapper">scrollmenuに戻る</a></span></div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient 
        montes, nascetur ridiculus mus. Donec quam felis, 
        ultricies nec, pellentesque eu, pretium quis, sem.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
            elit. Aenean commodo ligula. Cum sociis natoque penatibus 
            et magnis dis parturient montes, nascetur ridiculus 
            mus. Donec quam felis, ultricies nec, pellentesque 
            eu, pretium quis, sem. Nulla consequat massa quis 
            enim. Donec pede justo, fringilla vel, aliquet nec, 
            vulputate eget, arcu. In enim justo, rhoncus ut, 
            imperdiet a, venenatis vitae, justo. Nullam 
            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
            eleifend tellus. Aenean leo ligula, porttitor eu, 
            consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
            dapibus in, viverra quis, feugiat a, tellus. Phasellus 
            viverra nulla ut metus varius laoreet. Quisque rutrum. 
            Aenean imperdiet. Etiam ultricies nisi vel augue. 
            Curabitur ullamcorper ultricies nisi.
        </p>
      
        <div id="sectionB" class="scrollmenu">SectionB<span class="toscrollmenu"><a href="#samplewrapper">scrollmenuに戻る</a></span></div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus 
        et magnis dis parturient montes, nascetur ridiculus 
        mus. Donec quam felis, ultricies nec, pellentesque 
        eu, pretium quis, sem. Nulla consequat massa quis 
        enim. Donec pede justo, fringilla vel, aliquet nec, 
        vulputate eget, arcu. In enim justo, rhoncus ut, 
        imperdiet a, venenatis vitae, justo. Nullam dictumnteger tincidunt. Cras dapibus. 
        Vivamus elementum semper nisi. Aenean vulputate 
        eleifend tellus. Aenean leo ligula, porttitor eu, 
        consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
        dapibus in, viverra quis, feugiat a, tellus. Phasellus 
        viverra nulla ut metus varius laoreet. Quisque rutrum. 
        Aenean imperdiet. Etiam ultricies nisi vel augue. 
        Curabitur ullamcorper ultricies nisi.
        </p>

        <div id="sectionC" class="scrollmenu">SectionC<span class="toscrollmenu"><a href="#samplewrapper">scrollmenuに戻る</a></span></div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient 
        montes, nascetur ridiculus mus. Donec quam felis, 
        ultricies nec, pellentesque eu, pretium quis, sem.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient 
        montes, nascetur ridiculus mus. Donec quam felis, 
        ultricies nec, pellentesque eu, pretium quis, sem.
        </p>
     
    </div>
</section>