анимировать - scrollTop в Css - PullRequest
Новая
       33

анимировать - scrollTop в Css

0 голосов
/ 21 декабря 2018

У меня есть оглавление с 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, когда я хочу поставить пробел над заголовком или подзаголовком Iused 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 = = Ускоренные мобильные страницы. Как я могу сделать этот эквивалент в CSS?

1 Ответ

0 голосов
/ 21 декабря 2018

Существует встроенная функция 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>
...