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

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

22.08.2017, 16:14. Показов 2939. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
 SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru