I am using:

```
html {
    scroll-behavior: smooth;
}

```

to enable smooth scrolling to html anchor tags. I am also enabling vertical scroll snapping using `scroll-snap-type` and `scroll-snap-align` in the css as in the code below. The issue is that I can't get both behaviors to work. To enable scroll snapping I need to set a height on the containing `div`. This seems to disable the smooth scrolling to html anchor tags. You can experiment with this in the snippet below at full screen. If you delete `height: 100vh;` in the snippet below, the page will scroll smoothly to the anchors but it will not scroll snap. If you include it, the page will scroll snap but will jump to the anchors instead of smoothly scrolling.

```css
    html {
        scroll-behavior: smooth;
    }

    main {
        height: 100vh;
        overflow: scroll;
        scroll-snap-type: y mandatory;
    }

    section {
        height: 400px;
        scroll-snap-align: start;
    }

    nav {
        position: fixed;
        top: 0;
        color: white;
        width: 100%;
    }

    li {
        display: inline-block;
        list-style-type: none;
    }

    a:visited {
        color: white;
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: blue;
    }

    .three {
        background-color: grey;
    }

    .four {
        background-color: green;
    }
```

```html
    <nav>
        <ul>
            <li><a href="#section-2">section 2</a></li>
            <li><a href="#section-3">section 3</a></li>
            <li><a href="#section-4">section 4</a></li>
        </ul>
    </nav>

    <main>
        <section id="section-1" class="one">
        </section>
        <section id="section-2" class="two">
        </section>
        <section id="section-3" class="three">
        </section>
        <section id="section-4" class="four">
        </section>
    </main>
```