Rolagem suave para link de âncora

HTLM da navegação com ancora

<nav>
    <ul>
        <li><a class="anchor" href="#ws-section-1">Seção 1</a></li>
        <li><a class="anchor" href="#ws-section-2">Seção 2</a></li>
        <li><a class="anchor" href="#ws-section-3">Seção 3</a></li>
        <li><a class="anchor" href="#ws-section-4">Seção 4</a></li>
        <li><a class="anchor" href="#ws-section-5">Seção 5</a></li>
        <li><a class="anchor" href="#ws-section-6">Seção 6</a></li>
        <li><a class="anchor" href="#ws-section-7">Seção 7</a></li>
        <li><a class="anchor" href="#ws-section-8">Seção 8</a></li>
        <li><a class="anchor" href="#ws-section-9">Seção 9</a></li>
    </ul>
</nav>
<section>
    <section id="ws-section-1">Seção - 1</section>
    <section id="ws-section-2">Seção - 2</section>
    <section id="ws-section-3">Seção - 3</section>
    <section id="ws-section-4">Seção - 4</section>
    <section id="ws-section-5">Seção - 5</section>
    <section id="ws-section-6">Seção - 6</section>
    <section id="ws-section-7">Seção - 7</section>
    <section id="ws-section-8">Seção - 8</section>
    <section id="ws-section-9">Seção - 9</section>
</section>

HTLM e CSS do link para ir ao topo da pagina

<a href="#content" id="top" class="screen_reader">Ir para o conteúdo</a>

<a href="#top" class="anchor backtotop"></a>

.anchor {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.anchor.backtotop {
    position: fixed;
    bottom: 16px;
    right: 15px;
    width: 66px;
    height: 55px;
    font-size: 2.85rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    background-color: #B6AE1F;
    color: rgba(255, 255, 255, 0.90);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.70), -1px 1px rgba(0, 0, 0, 0.70);
    text-shadow:  0 0 1px 2px rgba(0, 0, 0, 0.70);
    filter: blur(1px);
    box-shadow: 1px 1px rgba(0, 0, 0, 0.30), -1px -1px rgba(0, 0, 0, 0.30) inset;
    border-radius: 30px 30px 21px 21px;
    z-index: 2243;
}
.anchor.backtotop:hover {
    filter: blur(1px) brightness(120%);
}

let scroll = {
    hash:      document.querySelectorAll(".anchor"),
    hashtop:   document.querySelector(".backtotop"),
    anchor: function() {
        this.hash.forEach( element => {
            element.addEventListener('click', event => {
                event.preventDefault();
                var Target = document.querySelector(element.hash).offsetTop;
                var time = 1000;
                var posY = window.pageYOffset;
                var start = null;
                time = +time;
                window.requestAnimationFrame(function step(timestep) {
                    start = (start) ? start : timestep;
                    var progress = timestep - start;
                    if(posY < Target) {
                        window.scrollTo(0, ((Target - posY) * progress / time) + posY);
                    } else {
                        window.scrollTo(0, posY - ((posY - Target) * progress / time));
                    }
                    if(progress < time) {
                        window.requestAnimationFrame(step);
                    } else {
                        window.scrollTo(0, Target);
                    }
                });
            });
        });
    },
    backtotop: function() {
        if(scroll.hashtop) {
            scroll.hashtop.style.display = "none";
            window.addEventListener('scroll', function() {
                if(window.pageYOffset > 500) {
                    if(typeof fade === 'object' && fade !== null)
                        fade.in.get(scroll.hashtop, 1000);
                    else
                        scroll.hashtop.style.display = "block";
                } else {
                    if(typeof fade === 'object' && fade !== null)
                        fade.out.get(scroll.hashtop, 1000);
                    else
                        scroll.hashtop.style.display = "none";
                }
            });
            scroll.hashtop.insertAdjacentHTML('beforeend', ' ↑');
            scroll.hashtop.setAttribute("aria-label", "Voltar ao topo da página");
            scroll.hashtop.title = "Voltar ao topo";
        }
    },
};
scroll.backtotop();
scroll.anchor();