Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
WebCyber
1 / 1 / 0
Регистрация: 05.09.2015
Сообщений: 68
#1

Плавная прокрутка на JS - JavaScript

24.03.2017, 09:15. Просмотров 248. Ответов 4
Метки нет (Все метки)

$(".buttUp").click(function (){
scrollBlock = $(".block_1").offset().top;
$("html").animate({scrollTop:scrollBlock}, 1100);
});

Данная функция на Jquery делает плавную прокрутку вверх, как написать аналогичное только на чистом JS ? Данная функция на Jquery делает плавную прокрутку вверх, как написать аналогичное только на чистом JS ? Судя по всему надо разобрать как на Jquery делается метод animate(), кто может помочь?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.03.2017, 09:15
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Плавная прокрутка на JS (JavaScript):

Плавная прокрутка изображения - JavaScript
Доброго дня. задача очень примитивна. моя реализация представлена тут - http://jsfiddle.net/h7H54/10/ суть вопроса - сделать тоже...

Плавная прокрутка до якоря без jQuery - JavaScript
Приветствую. Пишу на JS без jQuery. Нигде не могу найти, как задать скорость выполнения функции или время. Задача: при нажатии на...

Плавная прокрутка при нажатий по области - JavaScript
$(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop:...

Не работает плавная анимация - JavaScript
Есть блок. Если нажать на этот блок, то страница скроллится на самый верх. Проблема в том, что это проходит не плавно, а резко. Как...

Плавная смена картинок - JavaScript
Здравствуйте! Нужен самый простой ДжаваСкрипт или вообще самый простой способ как сделать плавную смену 2-3 картинок на сайте, чтобы...

Плавная остановка карусели - JavaScript
Имеется подобие слайда с картинками, которое прокручивается в бесконечном цикле. Приостанавливается при наведении курсором на нее. Как...

4
Padimanskas
Superposition
854 / 592 / 109
Регистрация: 27.10.2013
Сообщений: 2,060
24.03.2017, 10:18 #2
Цитата Сообщение от WebCyber Посмотреть сообщение
как написать аналогичное только на чистом JS ?
Javascript
1
window.scrollTo(0,document.body.scrollHeight);
Добавлено через 7 минут
Javascript
1
window.scrollTo(0,0);
0
WebCyber
1 / 1 / 0
Регистрация: 05.09.2015
Сообщений: 68
24.03.2017, 13:00  [ТС] #3
Нет, нужна плавная прокрутка, а это просто скачек вверх
0
Padimanskas
Superposition
854 / 592 / 109
Регистрация: 27.10.2013
Сообщений: 2,060
24.03.2017, 23:00 #4
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function scrollTo(element, to, duration) {
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;
 
    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}
 
 
window.scrollTo(0,document.body.scrollHeight);
 
 
scrollTo(document.body, 0, 600);
0
Teamur
7 / 7 / 3
Регистрация: 06.01.2015
Сообщений: 164
25.03.2017, 19:40 #5
Контейнеру со скроллбаром прописать в стилях CSS-свойство: scroll-behavior:smooth.
Теперь после ScrollTo страница прокрутится плавно!

Также можно почитать про WebAnimations API
1
25.03.2017, 19:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2017, 19:40
Привет! Вот еще темы с ответами:

плавная траектория движения обновляемая - JavaScript
к примеру за курсором летит птица, но не с линейной функцией приближения кто то имел дело с такими рода проектами? советы, как...

Плавная смена цвета слова - JavaScript
Вот, к примеру, слово написано красным цветом, а когда наводишь на него мышкой, оно медленно и плавно становится , к примеру, синим.. Как...

Плавная Смена фона страницы при прокрутке - JavaScript
Доброго времени суток! Как сделать чтобы при прокрутке страницы менялся цвет фона? то есть, например, пользователь переместился вниз до...

Плавная прокрутка к якорю - jQuery
Здравствуйте, я пока только учусь...немного не догоняю, в общем на странице есть меню <ul> <li><a class="link active"...


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

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

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