Анимированная прокрутка страницы на jQuery

Анимированная прокрутка страницы на jQuery

В этом небольшом видео я покажу вам как можно сделать простейшую прокрутку всей страницы до определенного места на сайте и сделать это все вместе с анимацией, то есть плавно.

Видеоурок

Исходный код

Анимированная прокрутка
<html>
<head>
  <meta charset="utf-8">
  <title>Прокрутка страницы</title>

  <style>
  #more {
    margin-top: 2000px;
    margin-bottom: 1000px;
  }
  </style>
</head>
<body>
  <div id="up"></div>

  <a href="javascript://0" onclick="slowScroll ('#more')">Более подробно</a>

  <div id="more">Больше информаци | <a href="javascript://0" onclick="slowScroll ('#up')">Навверх</a></div>

  <script src="js/jquery-3.1.0.min.js" charset="utf-8"></script>
  <script>
  function slowScroll (id) {
    var offset = 0;
    $('html, body').animate ({
      scrollTop: $(id).offset ().top - offset
    }, 500);
    return false;
  }
  </script>
</body>
</html>

Также стоит посмотреть

Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Создание игры на Python 3 с PyGame
5 уроков
Создание игры Unity 5 | Начало
9 уроков
3D шутер c мультиплеером в Unity
8 уроков
Уроки Node JS и Express для начинающих
17 уроков
Создание приложения на React JS / Использование API
7 уроков
Комментарии для сайта Cackle