动画 - Css 中的 scrollTop

Question

我有一个 table 的内容 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 中，当我想在标题或副标题上方放置一个 space 时，我使用了 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>

但现在我无法使用 query if not 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>

动画 - Css 中的 scrollTop

animate - scrollTop in Css

html

css

jquery

amp-html