Scroll Snap Breaks Smooth Scrolling

Question

I am trying to make a page with scroll snap as well as smooth scrolling when you click on a link but scroll snap seems to break smooth scrolling. On iOS it breaks the links completely and on desktop it just breaks the smooth scrolling. How can I get around this?

var root = $('html, body');
$('a[href^="#"]').click(function() {
  root.animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1000);
  return false;
});

html {
  grid-auto-flow: row;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

section {
  min-height: 80vh;
  scroll-snap-align: start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="1">
  Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<a href="#1">Go to 1</a> <a href="#2">Go to 2</a> <a href="#3">Go to 3</a> <a href="#4">Go to 4</a> <a href="#5">Go to 5</a> <a href="#6">Go to 6</a>
<section id="2">
  Section 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="3">
  Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="4">
  Section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="5">
  Section 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="6">
  Section 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>

Answer 1

I suggest adding scroll-behavior: smooth to the CSS in the html tag.

It should be much better ;-) It definitely looks better in the editor (Visual Studio Code + Live Server) than here.

var root = $('html, body');
$('a[href^="#"]').click(function() {
  root.animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1000);
  return false;
});

html {
  grid-auto-flow: row;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  min-height: 80vh;
  scroll-snap-align: start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="1">
  Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<a href="#1">Go to 1</a> <a href="#2">Go to 2</a> <a href="#3">Go to 3</a> <a href="#4">Go to 4</a> <a href="#5">Go to 5</a> <a href="#6">Go to 6</a>
<section id="2">
  Section 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="3">
  Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="4">
  Section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="5">
  Section 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>
<section id="6">
  Section 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel odio sit amet ligula placerat scelerisque vestibulum quis metus. Nulla ac felis eget urna venenatis mollis facilisis nec nulla. Aenean ornare venenatis orci vel sollicitudin.
  Nullam a felis eget tortor vestibulum egestas vel et sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla in varius sem, a vestibulum diam. Sed vel sollicitudin dui, sed elementum neque. Proin et metus placerat, tempus velit at,
  gravida nisi.
</section>