jQuery scrollTo со скользящей полосой прокрутки

Я использую плагин scrollTo для горизонтального веб-сайта, и он отлично работает. У меня есть список ссылок в основном разделе, и я также могу легко перемещаться между ними по одной, туда и обратно. Чтобы плагин работал, я должен использовать свойство overflow:hidden, однако я хочу дать пользователям возможность перемещать полосу прокрутки, если они этого хотят. Итак, я нашел плагин LocalScroll и с небольшим количеством кода (написанного кем-то другим, я просто скопировал его как есть) теперь у меня есть полоса прокрутки, скользящая по каждому разделу сайта.

Проблема в том, что якоря, которые я использую для перемещения на один раздел вперед и назад, перестали работать, поэтому мне приходится постоянно возвращаться на главную страницу, чтобы щелкнуть любой раздел, который я хочу увидеть. Это может быть лучше объяснено с помощью этого примера. Нажмите на любую ссылку, чтобы перейти к определенному разделу, и внутри этого раздела ссылки «назад» и «вперед» не работают. Вы должны нажать на логотип (ну, пробел, где он должен быть) слева, чтобы вернуться в основной раздел.

Я видел другие примеры горизонтальных веб-сайтов и заметил, что те, у которых есть скользящая полоса прокрутки, которая мне нужна, имеют только пару основных ссылок, и они имеют фиксированное положение, поэтому мне интересно, можно ли заставить это работать как у меня.

В этом примере файл custom.js работает с overflow:hidden, а файл test.js содержит дополнительный плагин/код, который я добавил.

Как всегда, я был бы очень признателен за любую помощь.


javascript jquery scrollbar scrollto jquery-plugins
person brunn    schedule 23.11.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

может быть, это поможет: на самом деле я сделал это для динамического меню в wordpress, вы можете увидеть рабочую версию здесь: http://loco.karolwasik.pl/ (script.js)

$('#menu a').bind('click', function(e){
     e.preventDefault();
     $('#subpanel-maska').scrollTo('#panel-'+$(e.target).attr('title'), 300, {easing: 'easeOutCirc'})
}

кстати. ваш код в этом кастоме довольно беспорядочный, вы должны свести его к минимуму или что-то в этом роде (я знаю, что мой тоже;))

person vonsko    schedule 23.11.2011
comment
Это не сработало, но спасибо. Кстати, кроме минимизации, что еще, по вашему мнению, можно было бы улучшить в моем коде? - person brunn; 23.11.2011
comment
ну я не профи, но попробуй объединить события в .bind примерно так: .bind('mouseup mousedown click' function(e){ if(e.type==='mousedown'){ ... } }) во-вторых - напиши одну функцию goto и сделай ее динамической - например получить параметр куда идти из attr(' href'), заголовок или даже идентификатор. это сократит ваш код до 15%: D - person vonsko; 24.11.2011
comment
Спасибо вам за ваши предложения. Я приму любые советы, которые я получу, чтобы улучшить свои навыки кодирования :) - person brunn; 27.11.2011

arrow_upward
0
arrow_downward

С помощью scrollTo я использовал классы jQuery для перехода от одного раздела к другому, поэтому я просто удалил эти классы и использовал идентификаторы разделов в элементах привязки. Теперь он работает так, как я хотел :)

person brunn    schedule 27.11.2011