Как сделать плавную прокрутку на JS без jQuery?

@andrewsitro · Регистрация: 31.07.2016

Студворк — интернет-сервис помощи студентам

Ни как не могу догнать... Распишите всё пожалуйста по поподробней
К примеру вот менюшка:

HTML5
1
2
3
4
5
6
7
<nav id="navMenu">
    <ul>
        <li><a href="#new1">New One</a></li>
        <li><a href="#new2">New Two</a></li>
        <li><a href="#new3">New Three</a></li>
    </ul>
</nav>

Вот DIV'ы:

HTML5
1
2
3
<div id="new1">...</div>
<div id="new2">...</div>
<div id="new3">...</div>

@mrtoxas · 12.08.2016, 00:56

Это вы распишите поподробней. Что и где должно происходить?

@andrewsitro · 12.08.2016, 13:33 **[ТС]**

Я имел ввиду что бы при нажатии на ссылки в меню, страница плавно прокручивалась к определённому DIV'у...

@mrtoxas · 12.08.2016, 14:59

CSS
1
2
3
4
[id^="new"]{
  height:100vh;
  border:1px solid black;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<nav id="navMenu">
    <ul>
        <li><a href="#new1">New One</a></li>
        <li><a href="#new2">New Two</a></li>
        <li><a href="#new3">New Three</a></li>
    </ul>
</nav>
 
<div id="new1"><h1>1</h1></div>
<div id="new2"><h1>2</h1></div>
<div id="new3"><h1>3</h1></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.querySelectorAll('[href^="#new"]').forEach(function(lnk) {
  var speed = 3;
  lnk.onclick = function() {
    var w = window.pageYOffset,
      hash = this.href.replace(/[^#]*(.*)/, '$1');
    t = document.querySelector(hash).getBoundingClientRect().top
    start = null;
    requestAnimationFrame(step);
    function step(time) {
      if (start === null) start = time;
      var progress = time - start,
        r = (t < 0 ? Math.max(w - progress / speed, w + t) : Math.min(w + progress / speed, w + t));
      window.scrollTo(0, r);
      if (r != w + t) {
        requestAnimationFrame(step)
      } else {
        location.hash = hash
      }
    }
  }
});

Результат

@ntlinuxnt · 12.08.2016, 15:24

mrtoxas, ему нужен плавный переход к якорю.

@mrtoxas · 12.08.2016, 15:47

Так это же и сделано

@andrewsitro · 12.08.2016, 18:04 **[ТС]**

Спасибо большое

@mrtoxas · 12.08.2016, 18:18

andrewsitro, Рано

Код выше только в хроме и опере работает. Вот, вроде бы везде рабочий:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var linkNav = document.querySelectorAll('[href^="#new"]'),
    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'); 
        t = document.querySelector(hash).getBoundingClientRect().top, 
        start = null;
    requestAnimationFrame(step);
    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
      }
    }
  }, false);
}

@andrewsitro · 14.08.2016, 12:04 **[ТС]**

Теперь точно спасибо ;-)

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	12.08.2016, 00:56
	Это вы распишите поподробней. Что и где должно происходить? 0

@andrewsitro 0 / 0 / 0 Регистрация: 31.07.2016 Сообщений: 10
	12.08.2016, 13:33 [ТС]
	Я имел ввиду что бы при нажатии на ссылки в меню, страница плавно прокручивалась к определённому DIV'у... 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	12.08.2016, 15:24
	mrtoxas, ему нужен плавный переход к якорю. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	12.08.2016, 15:47
	Так это же и сделано 0

@andrewsitro 0 / 0 / 0 Регистрация: 31.07.2016 Сообщений: 10
	12.08.2016, 18:04 [ТС]
	Спасибо большое 0

@andrewsitro 0 / 0 / 0 Регистрация: 31.07.2016 Сообщений: 10
	14.08.2016, 12:04 [ТС]
	Теперь точно спасибо ;-) 0

Как сделать плавную прокрутку на JS без jQuery?

Решение