поведение прокрутки плавное с тегом привязки без разницы - PullRequest
Новая
       19

поведение прокрутки плавное с тегом привязки без разницы

0 голосов
/ 09 октября 2018

Я пытаюсь добиться плавной прокрутки при нажатии на ссылку привязки, но в данный момент я все еще получаю быстрый переход к #content, и я не могу понять, где я ошибаюсь.

HTML: 

<body class="home">
  <section id="cover-section" class="section cover">
    <div class="cover-inner content">
      <h1 class="title"><span class="title-inner">TITLE</span></h1>
      <p class="byline">Some text here</p>
      <a class='section-jump' href='#content'></a>
    </div>
  </section>
  <section class="section content">
    <a id='content' href="https://github.community/t5"><img src="logo.png"
        alt="Logo image" title="Logo"></a>

CSS: 

.section-jump {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1em;
  border: 0.5em solid white;
  width: 0;
  height: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.section.content {
  height: 100vh;
  scroll-behavior: smooth;
}

Информация о браузере: версия Chrome 69.0.3497.100 Также протестирована в Safari 12.0

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Я получил этот код для работы, добавив свойство scroll-behavior в тег html в CSS, а не непосредственно в контейнер .section content.

0 голосов
/ 09 октября 2018

ваша проблема в селекторе css

должно быть таким: 

.section #content {
     height: 100vh;
     scroll-behavior: smooth;
 }

вы должны указать свой идентификатор

...