动画-CSS中的scrollTop

Question

我有一个带有html的目录，当我单击时，给我发送字幕h1，h2等等。

<div class="idc-box">
<p class="idc-titulo">Contents</p>
<ul class="idc-lista">
  <li ><a href="#indice1">1 Índice 1</a>
  <ul>
    <li><a href="#subindice1">1.1 Subíndice 1</a></li>
    <li><a href="#subindice2">1.2 Subíndice 2</a></li>
  </ul>
</li>
</ul>
</div>

<div>
<h2 class="stitulo" id="indice1"><span class="titulo">Indice 1</span></h2>
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h3 id="subindice1">Subindice 1.1</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 

<h3 id="subindice2">Subindice 1.2</h3>
asda
<div>

在jQuery中，当我想在标题或副标题上方放置空格时，我使用了animate-scrollTop：

<script type='text/javascript'>
$("#idc-box a").click(function(e){


    var enlace = $(this).attr('href');

    $('html, body').animate({
        scrollTop: ($(enlace).offset().top - 90) + 'px'
    }, 500)
})
</script>

但是现在如果不是CSS，就无法使用查询，因为我使用的是AMP = = Accelerated Mobile Pages如何在CSS中做到这一点？

Answer 1

有一个本机CSS功能，无需使用jQuery即可控制滚动行为，称为scroll-behavior：

body {
  background-color: #333;
}

.scrolling-box {
  scroll-behavior: smooth; // Animates scrolling - "smooth" scrolling
  padding: 15px;
  background-color: #eaeaea;
  display: block;
  width: 200px;
  height: 120px;
  overflow-y: scroll;
  text-align: center;
}

section {
  margin-top: 20px;
  height: 100px;
}

<div class="scrolling-box">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <section id="1">This is the first section</section>
  <section id="2">This is the second section</section>
  <section id="3">This is the third section</section>
</div>