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>

Новые блоги и статьи Все статьи Все блоги /
[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 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

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

	TopScroll для нескольких блоков 01.08.2013, 01:00. Показов 1341. Ответов 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