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

• Как сделать плавную прокрутку вверх
• Плавная прокрутка до якоря
• Как сделать переход к нужному месту страницы на HTML
• Прокрутить страницу при загрузки до якоря на JS
• Проскроллить содержимое iframe вниз/влево/вправо/вверх
• Код блока, фиксирующегося при прокрутки

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

прокрутит страницу на 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>