2

Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery

5
  • 5
    Ну, предположим, есть...
    – Qwertiy
    29 янв 2018 в 17:25
  • 2
    @Qwertiy, чётко и кратко +1
    – Yuri
    29 янв 2018 в 17:40
  • Конечно, js безграничен, их огромное количество! 29 янв 2018 в 17:41
  • Можно хотя бы одну сылку пожалуйста
    – Dan
    29 янв 2018 в 17:49
  • Вот тебе пример ru.stackoverflow.com/questions/722375/…
    – Air
    29 янв 2018 в 18:03

2 ответа 2

10

document.querySelector('nav').addEventListener('click', function (e) {
  var dest = e.target.href
  
  if (!dest || !(dest = dest.split('#')[1])) return

  e.preventDefault()

  var p = document.querySelector('main')
  var a = document.getElementById(dest)

  var st = p.scrollTop
  var d = a.getBoundingClientRect().top - p.getBoundingClientRect().top - 8
  var s = d / 1000
  var pt = performance.now()
  
  requestAnimationFrame(function f(t) {
    console.log((p.scrollTop = st + d * (t - pt) / 1000), (st + d))
    var cur = p.scrollTop = st + s * (t - pt)
    if (s<0 ? cur > st + d : cur < st + d) requestAnimationFrame(f)
    else requestAnimationFrame(() => p.scrollTop = st + d)
  })
});
* { box-sizing: border-box; }
nav { position: sticky; width: 1.25em; float: left; margin: 8px; }
a { display: block; line-height: 1.25em; text-align: center; }
a:hover { background: silver; }
html, body, main { height: 100%; margin: 0; }
main { overflow: auto; }
h1 { margin: 16px 0; background: antiquewhite; }
<nav>
  <a href="#s1">1</a>
  <a href="#s2">2</a>
  <a href="#s3">3</a>
  <a href="#s4">4</a>
  <a href="#s5">5</a>
  <a href="#s6">6</a>
  <a href="#s7">7</a>
  <a href="#s8">8</a>
  <a href="#s9">9</a>
  <a href="#s10">10</a>
</nav>

<main>
  <h1 id=s1>1</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s2>2</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s3>3</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s4>4</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s5>5</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s6>6</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s7>7</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s8>8</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s9>9</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s10>10</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
</main>

3
  • 1
    Почему скрипт не конфликтует, если быстро нажму на другую ссылку? 24 окт 2018 в 21:39
  • @ВиталикЧерный, не проверял, но скорее всего из-за того, что все коллбэки requestAnimationFrame выполняются в одном фрейме, а значит побеждает результат последнего. А поскольку каждое использование держит свои параметры в собственном замыкании и внутри фрейма не считывает ничего из dom-дерева, внезапные изменения от предыдущих обработчиков на его работу не влияют.
    – Qwertiy
    7 мая 2020 в 11:38
  • @Qwertiy Отличный, полезный ответ. Спасибо Qwertiy♦ 17 мая 2020 в 9:22
0

Уже можно сделать на чистом css: на элемент, который прокручивается, надо повесить scroll-behavior: smooth.

* { box-sizing: border-box; }
nav { position: sticky; width: 1.25em; float: left; margin: 8px; }
a { display: block; line-height: 1.25em; text-align: center; }
a:hover { background: silver; }
html, body, main { height: 100%; margin: 0; }
main { overflow: auto; }
h1 { margin: 16px 0; background: antiquewhite; }

main {
  scroll-behavior: smooth;
}
<nav>
  <a href="#s1">1</a>
  <a href="#s2">2</a>
  <a href="#s3">3</a>
  <a href="#s4">4</a>
  <a href="#s5">5</a>
  <a href="#s6">6</a>
  <a href="#s7">7</a>
  <a href="#s8">8</a>
  <a href="#s9">9</a>
  <a href="#s10">10</a>
</nav>

<main>
  <h1 id=s1>1</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s2>2</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s3>3</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s4>4</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s5>5</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s6>6</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s7>7</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s8>8</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s9>9</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
  <h1 id=s10>10</h1>
  <p>Есть ли плавный скролл между якорями на чистом JS? Интересует есть ли скрипт для плавного скролла на чистом JS, сайт делаю без использование jQuery</p>
</main>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.