Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
WebCyber
2 / 2 / 2
Регистрация: 05.09.2015
Сообщений: 68
#1

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

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

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

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

Плавная прокрутка при нажатий по области
$(document).ready(function() { $("a.topLink").click(function() { ...

Плавная прокрутка до якоря без jQuery
Приветствую. Пишу на JS без jQuery. Нигде не могу найти, как задать скорость...

Не работает плавная анимация
Есть блок. Если нажать на этот блок, то страница скроллится на самый верх....

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

Плавная смена картинок
Здравствуйте! Нужен самый простой ДжаваСкрипт или вообще самый простой способ...

4
Padimanskas
Superposition
934 / 594 / 256
Регистрация: 27.10.2013
Сообщений: 2,061
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
2 / 2 / 2
Регистрация: 05.09.2015
Сообщений: 68
24.03.2017, 13:00  [ТС] #3
Нет, нужна плавная прокрутка, а это просто скачек вверх
0
Padimanskas
Superposition
934 / 594 / 256
Регистрация: 27.10.2013
Сообщений: 2,061
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 / 5
Регистрация: 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
Привет! Вот еще темы с решениями:

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

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

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

Плавная прокрутка до якоря
Здравствуйте! Есть такое вот меню: <a...


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

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

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