С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484

Как сделать чтобы при клике на блок переместиться плавно вниз

22.08.2017, 16:14. Показов 2925. Ответов 2
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Как сделать чтобы при клике на блок я перемещался на 768px плавно вниз
0
Лучшие ответы (1)
Сообщение: #10704736
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 22.08.2017, 16:14
Ответы с готовыми решениями:

Сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике блок #cont появился
Как сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике блок #cont появился? Вроде это уже устаревший способ и не...

Bootstrap. Как сделать чтобы блок не спадал вниз другово блока?
Добрый день , помогите с таким вопросом. Вот у меня есть каруселька(слайдер) и картинка рядом с ним , как сделать чтобы когда страничку...

Как сделать так чтобы при нажатии scrollTop уходил вниз?
У textarea размер 50px, нужно чтбы при нажатии на enter он растягивался . Максимальное высота 200px. Пробывал autosize но не...

2
98 / 101 / 30
Регистрация: 21.10.2012
Сообщений: 320
22.08.2017, 20:21
Лучший ответ Сообщение было отмечено Николай16 как решение

Решение

HTML:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Scrolling down</title>
    </head>
    <body>
        <button id="scrollToDown">Вниз</button>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <p>Lorem ipsum text</p>
        <script src="util.js"></script>
    </body>
</html>


JS:
Кликните здесь для просмотра всего текста
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

window.addEventListener("load", function() {
    var btn = document.querySelector("#scrollToDown");
    btn.addEventListener("click", function() {
        var idTimer = setInterval(function() {
            var posScroll  = getScrollOffsets(window);
            var posScrollY = posScroll.y;
 
            if (posScrollY >= 768)
                clearInterval(idTimer);
            else {
                posScrollY = posScrollY + 7;
                window.scrollTo(0, posScrollY);
            }
        }, 15);
    }, false);
}, false);
 
function getScrollOffsets(w) {
    w = w || window;
    if (w.pageXOffset != null)
        return {x:w.pageXOffset, y:w.pageYOffset};
}
0
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484
22.08.2017, 20:29  [ТС]
Спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 22.08.2017, 20:29
Помогаю со студенческими работами здесь

Как сделать чтобы при клике прокрутка была внизу?
При клике на button мне нужно чтобы scroll всего документа уходила вниз. такой метод не работает, помогите пжл ...

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

Как сделать, чтобы форма не брала фокус при клике на ней?
Суть: есть полноэкранное приложение, поверх которого висит моя форма, при любом действии с другими формами, в том числе и моей, данное...

Как сделать, чтобы при вставке текста он не прокручивался вниз а оставался на первой строчке?
Здравствуйте! Хочу спросить совета у знающих людей, возможно кто-то поможет (хотя я уже мало надеюсь на помощь в этом вопросе)... ...

Как сделать так, чтобы при клике на метку, пользователь открывал страницу?
myMap.geoObjects.add(new ymaps.Placemark(, { iconContent: '&lt;a href = \&quot;/\&quot; style=\&quot;font-weight:normal;\&quot;&gt;Краснодар&lt;/a&gt;' }, { ...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru