Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
0 / 0 / 0
Регистрация: 31.07.2016
Сообщений: 10
1

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

12.08.2016, 00:42. Просмотров 1404. Ответов 8
Метки нет (Все метки)

Ни как не могу догнать... Распишите всё пожалуйста по поподробней
К примеру вот менюшка:
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>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.08.2016, 00:42
Ответы с готовыми решениями:

Как сделать плавную прокрутку по клику в меню к элементу страницы?
Как сделать плавную прокрутку по клику в меню к элементу страницы? Напишите, пожалуйста,...

Реализовать плавную прокрутку
Здравствуйте. Меня волнует (точнее, очень-очень БЕСИТ) один момент: когда в приложениях, созданных...

Как сделать скролл без jQuery?
как зделать скролл без всяких библиотек

Как сделать плавную анимацию?
У моей программы лишь 1 задача: двигать одну картинку повверх другой по нажатию той, или иной...

8
Модератор
Эксперт HTML/CSS
3206 / 2279 / 1370
Регистрация: 12.07.2015
Сообщений: 5,995
Записей в блоге: 3
12.08.2016, 00:56 2
Это вы распишите поподробней. Что и где должно происходить?
0
0 / 0 / 0
Регистрация: 31.07.2016
Сообщений: 10
12.08.2016, 13:33  [ТС] 3
Я имел ввиду что бы при нажатии на ссылки в меню, страница плавно прокручивалась к определённому DIV'у...
0
Модератор
Эксперт HTML/CSS
3206 / 2279 / 1370
Регистрация: 12.07.2015
Сообщений: 5,995
Записей в блоге: 3
12.08.2016, 14:59 4
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
      }
    }
  }
});
Результат
0
$ su
1600 / 515 / 97
Регистрация: 18.11.2010
Сообщений: 2,806
Записей в блоге: 2
12.08.2016, 15:24 5
mrtoxas, ему нужен плавный переход к якорю.
0
Модератор
Эксперт HTML/CSS
3206 / 2279 / 1370
Регистрация: 12.07.2015
Сообщений: 5,995
Записей в блоге: 3
12.08.2016, 15:47 6
Так это же и сделано
0
0 / 0 / 0
Регистрация: 31.07.2016
Сообщений: 10
12.08.2016, 18:04  [ТС] 7
Спасибо большое
0
Модератор
Эксперт HTML/CSS
3206 / 2279 / 1370
Регистрация: 12.07.2015
Сообщений: 5,995
Записей в блоге: 3
12.08.2016, 18:18 8
Лучший ответ Сообщение было отмечено ntlinuxnt как решение

Решение

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);
}
1
0 / 0 / 0
Регистрация: 31.07.2016
Сообщений: 10
14.08.2016, 12:04  [ТС] 9
Теперь точно спасибо ;-)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.08.2016, 12:04

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать плавную коллизию?
Привет. Есть коллизия. Камера сталкивается с окружностью. Когда координаты камеры приближаются к...

Как сделать POST запрос с ответом без jQuery?
Использую ajax из jquery, но мне он по сути не нужен Можно перевести из ajax в ванильный...

Как сделать плавную анимацию картинки?
Доброго времени суток, господа. Есть картинка. Нам нужно чтобы она бегала по диагонали плавно...

Как сделать плавную прозрачность картинки?
есть картинки на background и надо чтоб она постепенно становилась прозрачной. сверху вниз и у...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.