Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Настройка кнопок для прокрутки контента (https://javascript.ru/forum/misc/48568-nastrojjka-knopok-dlya-prokrutki-kontenta.html)

Silence 08.07.2014 19:24

Настройка кнопок для прокрутки контента
 
Всем добрый день! Я только начинаю изучать javascript, собирался до последнего копать сам, но столкнулся с проблемой, которая ставит меня в тупик.

Мне необходимо осуществить прокрутку контента через меню и через кнопки. За основу я взял скрипт с параллакс скролом - http://habrahabr.ru/post/142137/ .

Прокрутка через меню навигации получается без проблем. НО, кнопки "вперед" и "назад" работать отказываются. Если делать как в исходном, то прокрутка получается. Но мне это не подходит, я не хочу на каждой страничке ставить отдельные кнопки навигации.

Решил пойти другим путем: зафиксировал футер и, в зависимости от активного пункта меню, меняю ссылки и классы стрелок "вперед" и "назад" на нужные мне. Вот только скрипт тогда не срабатывает. Точнее срабатывает очень криво. Вот "подопытный образец" - http://dolgopolo.tmweb.ru/ (это тестовый домен, надеюсь за рекламу не сочтете).

Может кто-то видит, что я делаю не так, почему "визуально" верные коды, не работают как должны?

рони 08.07.2014 20:44

Silence,
много грузите jquery и MooTools ещё мешается между ними

Silence 08.07.2014 21:24

рони,
Если бы все так просто. Отключил сейчас все лишнее. Все равно мудрит.
Я так понимаю, что все дело в этой безумной конструкции:
if($(document).scrollLeft() >= section1Left && $(document).scrollLeft() < section2Left){
		$('nav#primary a.values-and-principles').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('values-and-principles individual-psychotherapy events contacts groups dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles events contacts dialogues groups');
		$('a.next').attr('href', '#individual-psychotherapy');
		$('a.next').addClass('individual-psychotherapy');
	} else if ($(document).scrollLeft() >= section2Left && $(document).scrollLeft() < section3Left){
		$('nav#primary a.individual-psychotherapy').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('individual-psychotherapy groups events contacts dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles individual-psychotherapy events contacts dialogues');
		$('a.next').attr('href', '#groups');
		$('a.next').addClass('groups');
		$('a.prev').attr('href', '#values-and-principles');
		$('a.prev').addClass('values-and-principles');
	} else if ($(document).scrollLeft() >= section3Left && $(document).scrollLeft() < section4Left){
		$('nav#primary a.groups').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('values-and-principles groups events contacts dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles individual-psychotherapy contacts dialogues');
		$('a.next').attr('href', '#events');
		$('a.next').addClass('events');
		$('a.prev').attr('href', '#individual-psychotherapy');
		$('a.prev').addClass('individual-psychotherapy');
	} else if ($(document).scrollLeft() >= section4Left && $(document).scrollLeft() < section5Left){
		$('nav#primary a.events').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('individual-psychotherapy events contacts dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles individual-psychotherapy groups events dialogues');
		$('a.next').attr('href', '#contacts');
		$('a.next').addClass('contacts');
		$('a.prev').attr('href', '#groups');
		$('a.prev').addClass('groups');
	} else if ($(document).scrollLeft() >= section5Left && $(document).scrollLeft() < section6Left){
		$('nav#primary a.contacts').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('individual-psychotherapy groups contacts dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles individual-psychotherapy events contacts');
		$('a.next').attr('href', '#dialogues');
		$('a.next').addClass('dialogues');
		$('a.prev').attr('href', '#events');
		$('a.prev').addClass('events');
	} else if ($(document).scrollLeft() >= section6Left){
		$('nav#primary a.dialogues').addClass('active');
		$('a.prev').removeAttr('href');
		$('a.prev').removeClass('individual-psychotherapy groups events dialogues');
		$('a.next').removeAttr('href');
		$('a.next').removeClass('values-and-principles individual-psychotherapy events contacts dialogues');
		$('a.prev').attr('href', '#contacts');
		$('a.prev').addClass('contacts');
	}


Но дело в том, что она выполняет свою роль: прописывает нужные классы и ссылки для навигации в зависимости от активного пункта меню.

рони 09.07.2014 00:08

Silence,
нафиг этот огород !!!
http://learn.javascript.ru/play/z2Qjxb

Silence 09.07.2014 00:42

рони,
Нет слов, спасибо огромное! Теперь донастрою.
Я думал воспользоваться массивом в конце, когда сам код будет работать. Согласен, от таких огородов необходимо сразу избавляться.


Часовой пояс GMT +3, время: 13:18.