Плавная прокрутка страницы до якоря | JavaScript

[На кнопки нажимать два и более раз]

прокрутит страницу на 100px ниже текущего положения

<input type="button" value="window.scrollBy(0,100)" onclick="window.scrollBy(0,100)"/>

прокрутит страницу на 100px ниже верхнего края веб-страницы

<input type="button" value="window.scrollTo(0,100)" onclick="window.scrollTo(0,100)"/>

Полный код с фиксацией кнопки можно посмотреть в отдельной статье. Что касается нашей задачи: наверх

<a href="#" id="vverh">наверх</a>

<script>
function vverh() {
  window.scrollBy(0,-10); // чем меньше значение (цифра -10), тем выше скорость перемещения
  if (window.pageYOffset > 0) {requestAnimationFrame(vverh);} // если значение прокрутки больше нуля, то функция повториться
}
document.getElementById('vverh').addEventListener('click', function(e) {
   e.preventDefault();  // запрет перехода по ссылке, вместо него скрипт
   vverh();
}, false);
</script>

Плавная прокрутка до якоря

Было сделано фиксированное меню с пунктами, нажав на которые страница плавно прокручивалась до соответствующего id. Пример можно увидеть там же или пощёлкав по панели справа в данной статье.

<script>
var linkNav = document.querySelectorAll('[href^="#nav"]'),
    V = 2;  // скорость, может иметь дробное значение через точку
for (var i = 0; i < linkNav.length; i++) {
  linkNav[i].addEventListener('click', function(e) {
    e.preventDefault();
    var w = window.pageYOffset,  // прокрутка
        hash = this.href.replace(/[^#]*(.*)/, '$1');  // id элемента, к которому нужно перейти
        t = document.querySelector(hash).getBoundingClientRect().top,  // отступ от окна браузера до id
        start = null;
    requestAnimationFrame(step);  // подробнее про функцию анимации [developer.mozilla.org]
    function step(time) {
      if (start === null) start = time;
      var progress = time - start,
          r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
      window.scrollTo(0,r);
      if (r != w + t) {
        requestAnimationFrame(step)
      } else {
        location.hash = hash  // URL с хэшем
      }
    }
  }, false);
}
</script>
в f t
наверх ↑

3 комментария:

Анонимный
Подскажите, как добавить отступ от верха окна?
При прокрутке к якорю он слишком высоко оказывается и шапка налазит.
NMitra
Посмотрите тут:
http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#fix
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#name
Анонимный
Супер, спасибо