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

称为scroll-behavior的原生CSS功能可控制滚动行为而无需使用jQuery：

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

1 个答案: