Прокрутить блок до середины

@desperate_one · Регистрация: 02.07.2017

Студворк — интернет-сервис помощи студентам

Привет! Как прокручивать блок конкретно до его же середины?

HTML5
1
2
3
4
<div class="content">
<h3>Header</h3>
<p>paragraph</p>
</div>

CSS
1
2
3
#content {
height:1000px;
}

Qwerty_Wasd · 27.11.2018, 12:42

desperate_one, по какому событию должна происходить прокрутка?

@desperate_one · 27.11.2018, 13:07 **[ТС]**

Сообщение от Qwerty_Wasd

desperate_one, по какому событию должна происходить прокрутка?

По клику, скажем например по кнопке

HTML5
1
<button id="movetocenter"></button>

Добавлено через 6 минут
Вообще полная программа тут:

CSS
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
        body {
            margin:0px;
        }
        #content {
            border:1px solid green;
            height:70%;
            margin:30px auto;
            padding:30px;
            width:90%;
        }
        #popup {
             display:none;
            height:100vh;
            left:0;
            position:fixed;
            text-align:center;
            top:0;
            width:100vw;
        }
        #popup-bg {
              background:rgba(0,0,0,0.3);
              bottom:0;
            height:auto;
              left:0;
              position:fixed;
              right:0;
              top:0;
              width:auto;
              z-index:1;
        }
        #popup-content {
            background:#fff;
            font-size:10pt;
            margin:5% auto;
            max-height:90%;
            max-width:90%;
            overflow-x:auto;
            overflow-y:auto;
            padding:20px 5px;
            position:sticky;
            text-align:center;
            top:1%;
            z-index:2;
            width:auto !important;
        }
        #popup table {
            box-sizing:border-box;
            margin:5px auto;
            width:500px;
        }
        #popup-table-body table thead {
            width:calc(100% - 1em);
        }
        #popup-table-body table tbody {
            border-top:1px solid grey;
            display:block;
            max-height:500px;
            overflow-y:auto;
            width:calc(100% + 1em);
        }
        #popup table tr {
            display:table;
            table-layout:fixed;
            width:95%;
        }
        #popup td {
            border:1px solid grey;
            padding:7px;
        }
        #zoom-area {
            background:#f2f2f2;
            border:1px solid grey;
            border-radius:4px;
            font-size:11pt;
            height:120px;
            left:350px;
            margin:0px auto;
            padding:6px 14px;
            position:fixed;
            text-align:left;
            top:50%;
            width:520px;
        }
        #zoom-area p {
            margin:0px;
        }
        #zoom-area button {
            float:right;
        }
        .zoom-row {
            background:#eeeeee;
            border:1px solid grey;
            border-radius:4px;
            display:block;
            font-size:11pt;
            height:70px;
            margin:0px auto;
            table-layout:auto;
            top:50%;
            width:100% !important;
            word-wrap:break-word;
            word-break:break-all;
        }
        .zoom-prev,.zoom-next {
            transition:0.2s;
        }
        .zoom-prev {
        }
        .zoom-next {
        }
        .zoom-pointer {
            color:#0381a0;
            font-size:25pt;
            left:300px;
            position:fixed;
            top:53%;
            z-index:999;
        }
        .zoom-up,.zoom-down {
            border:1px solid grey;
            border-radius:5px;
            color:#fff;
            display:inline-block;
            font-size:25pt;
            height:50px;
            opacity:0.7;
            position:fixed;
            right:20%;
            text-align:center;
            vertical-align:middle;
            width:50px;
            z-index:999;
        }
        .zoom-up:hover,.zoom-down:hover {
            background:#dddddd;
            cursor:pointer;
        }
        .zoom-up {
            background:forestgreen;
            top:25%;
        }
        .zoom-down {
            background:maroon;
            bottom:25%;
        }

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
                    <div id="popup-table-body">
                        <table>
                        <thead>
                            <tr>
                                <th>Наименование</th>
                                <th>Вес</th>
                                <th>Срок годности</th>
                                <th>Цена</th>
                                <th>Изготовитель</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="zoom-row">
                                <td>Вареники</td>
                                <td>400гр.</td>
                                <td>20 суток</td>
                                <td>50 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Булочки</td>
                                <td>200гр.</td>
                                <td>5 суток</td>
                                <td>25 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пельмени</td>
                                <td>500гр.</td>
                                <td>30 суток</td>
                                <td>100 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Хлеб</td>
                                <td>300гр.</td>
                                <td>3 сутки</td>
                                <td>15 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пряники</td>
                                <td>250гр.</td>
                                <td>5 суток</td>
                                <td>45 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Булочки</td>
                                <td>200гр.</td>
                                <td>5 суток</td>
                                <td>25 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пельмени</td>
                                <td>500гр.</td>
                                <td>30 суток</td>
                                <td>100 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Хлеб</td>
                                <td>300гр.</td>
                                <td>3 сутки</td>
                                <td>15 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пряники</td>
                                <td>250гр.</td>
                                <td>5 суток</td>
                                <td>45 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Булочки</td>
                                <td>200гр.</td>
                                <td>5 суток</td>
                                <td>25 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пельмени</td>
                                <td>500гр.</td>
                                <td>30 суток</td>
                                <td>100 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Хлеб</td>
                                <td>300гр.</td>
                                <td>3 сутки</td>
                                <td>15 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пряники</td>
                                <td>250гр.</td>
                                <td>5 суток</td>
                                <td>45 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Булочки</td>
                                <td>200гр.</td>
                                <td>5 суток</td>
                                <td>25 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пельмени</td>
                                <td>500гр.</td>
                                <td>30 суток</td>
                                <td>100 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Хлеб</td>
                                <td>300гр.</td>
                                <td>3 сутки</td>
                                <td>15 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пряники</td>
                                <td>250гр.</td>
                                <td>5 суток</td>
                                <td>45 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Булочки</td>
                                <td>200гр.</td>
                                <td>5 суток</td>
                                <td>25 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пельмени</td>
                                <td>500гр.</td>
                                <td>30 суток</td>
                                <td>100 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Хлеб</td>
                                <td>300гр.</td>
                                <td>3 сутки</td>
                                <td>15 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                            <tr>
                                <td>Пряники</td>
                                <td>250гр.</td>
                                <td>5 суток</td>
                                <td>45 сом</td>
                                <td>Кыргызстан</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>

JavaScript
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
$(document).ready(function() {
 
      $('.view-price button').click(function() {
          $('#popup').fadeIn();
      });
 
      $('.zoom-down').click(function() {
          var zoom_ind = $('.zoom-row');
          var popuptablebodytabletbody = $('#popup-table-body table tbody');
 
          $('.zoom-next').removeClass();
          $('.zoom-prev').removeClass();
 
          $(zoom_ind).removeClass('zoom-row');
          $(zoom_ind).next().addClass('zoom-row');
 
          $('.zoom-row').next().addClass('zoom-next');
          $('.zoom-row').prev().addClass('zoom-prev');
 
          var zoomRow_name = $('#popup-table-body table thead tr th:first').text();
          var zoomInd_name = $('.zoom-row td:first').text();
          var zoomInd_weight = $('.zoom-row td:nth-child(2)').text();
          $('#zoom-area-name').empty();
          $('#zoom-area-weight').empty();
          $('#zoom-area button').remove();
          $('#zoom-area-name').append('<b>' + zoomRow_name + ': </b>');
          $('#zoom-area-name').append(zoomInd_name);
          $('#zoom-area-weight').append('<b>' + $('#popup-table-body table thead tr th:nth-child(2)').text() + ': </b>' + zoomInd_weight);
          $('#zoom-area').append('<button class="btn btn-warning">заказать</button>');
 
          $('#popup-table-body table tbody').animate({
                    scrollTop: $(".zoom-row").offset().top
          }, 400);
      });
 
      $('.zoom-up').click(function() {
          var zoom_ind = $('.zoom-row');
          var popuptablebodytabletbody = $('#popup-table-body table tbody');
 
          $('.zoom-next').removeClass();
          $('.zoom-prev').removeClass();
 
          $(zoom_ind).removeClass('zoom-row');
          $(zoom_ind).prev().addClass('zoom-row');
 
          $('.zoom-row').next().addClass('zoom-next');
          $('.zoom-row').prev().addClass('zoom-prev');
 
          var zoomRow_name = $('#popup-table-body table thead tr th:first').text();
          var zoomInd_name = $('.zoom-row td:first').text();
          $('#zoom-area-name').empty();
          $('#zoom-area button').remove();
          $('#zoom-area-name').append('<b>' + zoomRow_name + ': </b>');
          $('#zoom-area-name').append(zoomInd_name);
          $('#zoom-area').append('<button class="btn btn-warning">заказать</button>');
 
          $('#popup-table-body table tbody').animate({
                    scrollTop: $(".zoom-row").offset().top
          }, 400);
      });
 
});

И нужно чтобы каждый новый .zoom-row смещался под область #zoom-area. Пока нафичил скролл, но он непонятно работает.

Qwerty_Wasd · 27.11.2018, 13:19

desperate_one, в html присутствуют селекторы id="popup-table-body" и class="zoom-row". Какой #zoom-area?
Далее

Сообщение от desperate_one

каждый новый .zoom-row

как они добавляются? Вы подгружаете аяксом с БД\файлов? Генерите скриптом?
Составьте пожалуйста минимальный пример, полностью демонстрирующий Вашу проблему.

@desperate_one · 27.11.2018, 13:27 **[ТС]**

Сообщение от Qwerty_Wasd

desperate_one, в html присутствуют селекторы id="popup-table-body" и class="zoom-row". Какой #zoom-area?
Далее как они добавляются? Вы подгружаете аяксом с БД\файлов? Генерите скриптом?
Составьте пожалуйста минимальный пример, полностью демонстрирующий Вашу проблему.

в JS скрипте я привел пример, который при клике на одну из кнопок удаляет из текущей строки .zoom-row и добавляет к следующей/предыдущей строке .zoom-row, то есть он только один в таблице должен быть

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	27.11.2018, 12:42
	desperate_one, по какому событию должна происходить прокрутка? 0