TopScroll для нескольких блоков

@Samsagriz · Регистрация: 23.09.2012

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

По проблеме скроллинга создавал тему в другом разделе, но ответа не получил. Может тут кто поможет.
Итак, имеется сайт с одной страницей, при клике на какую-либо ссылку в главном меню она просто скроллится в нужное место. Проблема в том, что в каждом блоке разное количество текста (при этом див один и тот же, для разных разделов меню я не использую разные дивы). В результате, к одному блоку страница скроллится нормально, другой получается выше нужной точки или наоборот, ниже. Отступы и якоря не выход, уже все перепробовал. Суть - можно ли с помощью topScroll спозиционировать все блоки, то есть разделы меню так, чтобы они, независимо от количества текста скроллились к одной точке на экране - в центр например, или с определенными параметрами? Насколько я понял, topScroll может это делать только с одним дивом, или нет? Если нет, то как применить его для каждого блока?

Добавлено через 10 минут
Пошарился тут еще на буржуйских форумах, пишут про TopScroll, что проблемы с работой в огнелисе и опере. Это правда?

@vooduq · 01.08.2013, 01:41

JavaScript
1
2
3
4
5
6
7
8
9
10
function topScroll('кнопка','див') {
$(кнопка).click(function(){ // при клике на кнопку
var divTopPosition = $(название дива).position().top; //получаем координаты расположения текущего дива от топа
$(window).scrollTop(divTopPosition); //задаем событие перемещение скролла от верха к началу дива
});
};
 
topScroll('кнопка1','див1');
topScroll('кнопка2','див2');
topScroll('кнопка3','див3'); //вызываем функцию для каждой кнопки/дива

@Samsagriz · 01.08.2013, 01:49 **[ТС]**

Вы уж извините, разжуйте подробнее, не силен в jQuery. Итак:

$(кнопка).click(function(){ // при клике на кнопку - здесь что указать - у меня не графическая кнопка, а обычная ссылка текстом, то есть написать название ссылки или что (скажем, ссылка по типу якоря #home)?

var mainCenter = $('body').height()/2; //получаем высоту страницы деленную на двое - то есть центр страницы - а можно ли как-то указать свои параметры? Насчет центра это я условно написал, мне нужно правильное соотношение между всеми элементами на странице, т.е. это может быть немного выше центра, или ниже. В идеале было бы указать в процентах, с учетом разных разрешений экрана.

И главный вопрос - для нескольких текстовых блоков, просто тупо вставить этот код с разными названиями ссылок (в скобках где Кнопка) или как?

Добавлено через 2 минуты
Ага, уже подредактировали

Сейчас попробую, как сработает.

@vooduq · 01.08.2013, 01:59

нужно выделить кнопку(ссылку) и див уникальным id или class - это в css читайте и потом использовать их в своем коде там где кнопка1 - id кнопки1/где див1 - id дива1 и т.д.

Добавлено через 2 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
function topScroll(button,divId) {
$(button).click(function(){ // при клике на кнопку
var divTopPosition = $(divId).position().top; //получаем координаты расположения текущего дива от топа
$(window).scrollTop(divTopPosition); //задаем событие перемещение скролла от верха к началу дива
});
};
 
topScroll('кнопка1','див1');
topScroll('кнопка2','див2');
topScroll('кнопка3','див3'); //вызываем функцию для каждой кнопки/дива

подправил еще чтоб работало
с вас только id или class кнопок и дивов к которым нужно подвинутся

@Samsagriz · 01.08.2013, 02:01 **[ТС]**

Опережаем друг друга в сообщениях

Сейчас отпишусь, как попробую...

@vooduq · 01.08.2013, 02:04

читайте css присвоение class или id обьектам
нам нужно знать какую кнопку мы нажали, и к какому блоку(див это и есть блок) нужно подвинутся, все. class или id сделает их уникальными(текстовый блок или что то другое не важно) для определения
так проще всего

@Samsagriz · 01.08.2013, 02:23 **[ТС]**

ммм... Мне все-таки не совсем понятно что в button прописывать. Хорошо, я создал сейчас для каждого блока отдельные дивы, указал их в вашем коде. Но в батоне - если пишу скажем, contact.html - это понятное дело, некорректно, потому что тогда идет переход на страницу которой несуществует (весь конент ведь как бы на одной странице находится). То же самое если я в ссылке пишу просто contact. А вот если пытаюсь указать #contact, тогда уже ругается java-script в котором находится код, типа синтаксическая ошибка. Где я туплю?

@vooduq · 01.08.2013, 02:59

<a id='button1'>ссылка первая</a>
<div>
<div id='div1'>текст первый</div>
</div>

topScroll('#button1','#div1');

учите html css в конце то концов, как можно научить человека писать, если он буков не знает

@Samsagriz · 01.08.2013, 03:06 **[ТС]**

Либо я слишком тупой, либо что-то не так: На страницу я вставил следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function topScroll(button,divId) {
$(button).click(function(){ // при клике на кнопку
var divTopPosition = $(divId).position().center; //получаем координаты расположения текущего дива от топа
$(window).scrollTop(divTopPosition); //задаем событие перемещение скролла от верха к началу дива
});
};
topScroll('history','history');
topScroll('life','life');
topScroll('photos','photos');
topScroll('performance','performance');
topScroll('contact','contact'); //вызываем функцию для каждой кнопки/дива //вызываем функцию для каждой кнопки/дива
</script>

А вот кусок css-кода:

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
/*Section Settings*/
 
.section {
   margin-top: 12%;
   margin-bottom: 0%;
   height: auto;
   width: 100%;
   float: left;
}
 
.section h2 {
   margin: 50px 0px 0px 0px;
}
 
.section p {
   margin: 20px 0px 0px 500px;
   width: 600px;
   font-family: Arial, sans-serif;
   color: #333;
   font-size: 16px;
   line-height: 20px;
}
 
.history {
   color: #000;
   background: #fff;
   margin-top: 20%;
   margin-left: 35%;
   margin-right: 20%;
   margin-bottom: 20%;
}
 
.life {
   color: #000;
   background: #fff;
   margin-top: 20%;
   margin-left: 35%;
   margin-right: 20%;
   margin-bottom: 20%;
}
 
.photos {
   color: #000;
   background: #fff;
   margin-top: 20%;
   margin-left: 35%;
   margin-right: 20%;
   margin-bottom: 20%;
}
 
.performance {
   color: #000;
   background: #fff;
   margin-top: 20%;
   margin-left: 35%;
   margin-right: 20%;
   margin-bottom: 20%;
}
 
.contact {
   color: #000;
   background: #fff;
   margin-top: 20%;
   margin-left: 35%;
   margin-right: 20%;
   margin-bottom: 20%;
}

в css указаны пять дивов, то есть блоков с текстом. Вроде везде всему присвоены имена. Что не так? Нужно ли что-то указывать в 4-й и 5-й строках java-script?

Добавлено через 4 минуты
В общем, лучше я утром еще раз все просмотрю. На таком уровне html/css я знаю, но после дня работы видимо конкретно туплю. С утра отпишусь еще раз что и как. В любом случае, спасибо за помощь, гляньте еще в топик позже, если не сложно.

@vooduq · 01.08.2013, 14:48

вы забыли добавить .history точку, классы должны быть разными для кнопки и для блока к примеру

JavaScript
1
topScroll('.historyButton','.historyContent');

так же можно усовершенствовать функцию по содержимому вашего текста:

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function topScroll(button,divId) {
$(button).click(function(){ // при клике на кнопку
var divTopPosition = $(divId).position().top; //получаем координаты расположения текущего дива от топа
$(window).scrollTop(divTopPosition); //задаем событие перемещение скролла от верха к началу дива
});
};
topScroll('.historyButton',':contains("Заголовок статьи 1")'); //при нажатии на .historyButton ищет текст Заголовок статьи 1 и направляет к нему
topScroll('.lifeButton',':contains("Заголовок статьи 2")'); 
</script>

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98

	TopScroll для нескольких блоков 01.08.2013, 01:00. Показов 1325. Ответов 9 Метки нет (Все метки) По проблеме скроллинга создавал тему в другом разделе, но ответа не получил. Может тут кто поможет. Итак, имеется сайт с одной страницей, при клике на какую-либо ссылку в главном меню она просто скроллится в нужное место. Проблема в том, что в каждом блоке разное количество текста (при этом див один и тот же, для разных разделов меню я не использую разные дивы). В результате, к одному блоку страница скроллится нормально, другой получается выше нужной точки или наоборот, ниже. Отступы и якоря не выход, уже все перепробовал. Суть - можно ли с помощью topScroll спозиционировать все блоки, то есть разделы меню так, чтобы они, независимо от количества текста скроллились к одной точке на экране - в центр например, или с определенными параметрами? Насколько я понял, topScroll может это делать только с одним дивом, или нет? Если нет, то как применить его для каждого блока? Добавлено через 10 минут Пошарился тут еще на буржуйских форумах, пишут про TopScroll, что проблемы с работой в огнелисе и опере. Это правда? 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	01.08.2013, 01:49 [ТС]
	Вы уж извините, разжуйте подробнее, не силен в jQuery. Итак: $(кнопка).click(function(){ // при клике на кнопку - здесь что указать - у меня не графическая кнопка, а обычная ссылка текстом, то есть написать название ссылки или что (скажем, ссылка по типу якоря #home)? var mainCenter = $('body').height()/2; //получаем высоту страницы деленную на двое - то есть центр страницы - а можно ли как-то указать свои параметры? Насчет центра это я условно написал, мне нужно правильное соотношение между всеми элементами на странице, т.е. это может быть немного выше центра, или ниже. В идеале было бы указать в процентах, с учетом разных разрешений экрана. И главный вопрос - для нескольких текстовых блоков, просто тупо вставить этот код с разными названиями ссылок (в скобках где Кнопка) или как? Добавлено через 2 минуты Ага, уже подредактировали Сейчас попробую, как сработает. 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	01.08.2013, 02:01 [ТС]
	Опережаем друг друга в сообщениях Сейчас отпишусь, как попробую... 0

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	01.08.2013, 02:04
	читайте css присвоение class или id обьектам нам нужно знать какую кнопку мы нажали, и к какому блоку(див это и есть блок) нужно подвинутся, все. class или id сделает их уникальными(текстовый блок или что то другое не важно) для определения так проще всего 0

@Samsagriz 2 / 2 / 0 Регистрация: 23.09.2012 Сообщений: 98
	01.08.2013, 02:23 [ТС]
	ммм... Мне все-таки не совсем понятно что в button прописывать. Хорошо, я создал сейчас для каждого блока отдельные дивы, указал их в вашем коде. Но в батоне - если пишу скажем, contact.html - это понятное дело, некорректно, потому что тогда идет переход на страницу которой несуществует (весь конент ведь как бы на одной странице находится). То же самое если я в ссылке пишу просто contact. А вот если пытаюсь указать #contact, тогда уже ругается java-script в котором находится код, типа синтаксическая ошибка. Где я туплю? 0

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	01.08.2013, 02:59
	<a id='button1'>ссылка первая</a> <div> <div id='div1'>текст первый</div> </div> topScroll('#button1','#div1'); учите html css в конце то концов, как можно научить человека писать, если он буков не знает 0