[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


Скрипты и коды для юкоз - Форум аццкого кодера » Скрипты jQuery, Примеры на jQuery и подобное » Плавная прокрутка до заданного блока. jQuery.

Плавная прокрутка до заданного блока. jQuery.
[1] likbezz [22.03.2012, 11:04]
Q: Krem-Brule
Quote (Krem-Brule)
где косяк?)


Code
<script type="text/javascript">
jQuery('a').click(function() {
str = jQuery(this).val();
jQuery.scrollTo("#"+str);
});
</script>

<ul class="ulother2">
<li><a href="#inf">Информация о юридическом лице</a></li>
<li><a href="#prof">Что есть для профессиональных косметологов?</a></li>
<li><a href="#kont">Контакты, общая информация</a></li>
<li><a href="#akc">Акции, скидки</a></li>
<li><a href="#log">Принципы работы</a></li>
<li><a href="#howto">Как совершить покупку?</a></li>
<li><a href="#fb">Остались вопросы? Задайте их нам</a></li>
<li><a href="http://vk.com/topic-28703510_25782194" target="_blank"><b>Отзывы наших покупателей</b></a> new</li>
</ul>
[2] likbezz [22.03.2012, 11:08]
Везде )))
Одни косяки.
Code
jQuery(this).val();
- нет у ссылки атрибута «value»
Code
jQuery.scrollTo("#"+str);
- у якоря <a href="#fb"> - уже есть решётка - «#fb»
Сам скрипт расположен до блоков которые обрабатывает, а должен после, либо через $(document).ready();
Нет самого плагина $scrollTo();
... Ну, вроде всё ... но тут каждой ошибки хватит что бы скрипт не работал )))
...
[3] likbezz [22.03.2012, 11:23]
Короче.
Вот краткая инструкция:

1. Подключаем к странице плагин jq.scrollTo-min.js (смотри прикрепление) ... после закрывающего
Code
</head>
- в любое место, можно в глобальный блок.
Code
<script type="text/javascript" src="http://likbezz.ru/_source/_js/lib/jq.scrollTo-min.js"></script>

...

2. Создаём структуру:
Code
<a href="#inf">Информация о юридическом лице</a>
<div id="inf"></div>

Где:
Code
href="#inf"
- якорь ссылки == ID блоку. Число ссылок не ограничено, ID и якорь - должны быть уникальными.
...

3. Ниже всего контента добавляем скрипт-обработчик:
Code
<script type="text/javascript">
$('#scrollPanel a').click(function(){
var str=$(this).attr('href');
$.scrollTo(str,500);
return false;
});
</script>

Где:
scrollPanel - ID блока с якорными ссылками. Можно использовать класс.
...

Пользуем )
...

Примеры:
jQuery.scrollTo(); Плавная прокрутка до заданного блока. Пример №1

jQuery.scrollTo(); Плавная прокрутка до заданного блока. Пример №2

jQuery.scrollTo(); Плавная прокрутка до заданного блока. Пример №3 + Куча разных эффектов
...

Исходник примера, на всякий:
Прикрепления: jq.scrollTo-min.js (2.2 Kb)
[4] Krem-Brule [27.03.2012, 00:25]
спасибо!

Добавлено (27.03.2012, 00:25)
---------------------------------------------
как прикрутить easing например?

[5] Krem-Brule [27.03.2012, 17:45]
ну прокрутку с фффектом... скорость, амплитуда....
[6] likbezz [27.03.2012, 17:50]
Krem-Brule,
Quote (Krem-Brule)
ну прокрутку с фффектом... скорость, амплитуда....

Code
$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );


scrollTo
...
[7] Krem-Brule [27.03.2012, 17:54]
. easeOutBounce

http://jqueryui.com/demos/effect/easing.html

Добавлено (27.03.2012, 17:54)
---------------------------------------------
да-да.. в тот скрипт прописать

[8] likbezz [27.03.2012, 17:55]
Krem-Brule, Вот здесь: http://demos.flesler.com/jquery/scrollTo/ перечислены доступные эффекты данного плагина
...
[9] Krem-Brule [27.03.2012, 18:06]
Quote (likbezz)
$(...).scrollTo( 'li:eq(15)', 2500, {easing:'elasout'} );

$.scrollTo('str',1000, {easing:'elasout'} );
[10] likbezz [27.03.2012, 19:52]
Krem-Brule,
Quote (Krem-Brule)
$.scrollTo('str',1000, {easing:'elasout'} );

Да, типа того, только str не строка, а объект.
... Если нужны другие эффекты, что не присутствуют в стандартном JQ их можно подключить отдельно.
...
[11] nikki4 [11.05.2012, 17:03]
а можно ли как-то сделать, чтобы прокрутка была при нажатии на обычную кнопку?
Code
<input type="submit" value="ok">


Сообщение отредактировал nikki4 - Пятница, 11.05.2012, 17:57
[12] likbezz [11.05.2012, 20:02]
nikki4,
Quote (nikki4)
а можно ли как-то сделать, чтобы прокрутка была при нажатии на обычную кнопку?
<input type="submit" value="ok">

- Да, конечно.
Вот так:
Code
<div id="scrollPanel"><a href="#antchar"><input type="button" value="ok"></a></div>
<script type="text/javascript">
$('#scrollPanel a').click(function(){
var str=$(this).attr('href');
$.scrollTo(str,500);
return false;
});
</script>

Где:
Просто упаковываем кнопку в ссылку.
...

Или вот так:
Code
<div id="scrollPanel"><input name="#antchar" type="button" value="ok"></div>
<script type="text/javascript">
$('#scrollPanel input').click(function(){
var str=$(this).attr('name');
$.scrollTo(str,500);
return false;
});
</script>

Где:
- вешаем имя якоря на атрибут name кнопки и обработчик тоже на неё.
...

Или вот так:
Code
<script type="text/javascript">
function scrolToThe(key){
$.scrollTo(key,500);
return false;
};
</script>
<input onclick="scrolToThe('#antchar');return false;" type="button" value="ok" />

Где:
Просто создаём функцию без привязки к элементу и вызываем по клику. Якорь передаём через вызов функции.

Или совсем просто:
Code
<input onclick="$.scrollTo('#antchar',500);return false;" type="button" value="ok" />

Где: якорь указываем сразу в обработчике onclick.
...

Можно не только к кнопке, а вообще к любому элементу и событию.
...
[13] nick1594 [29.06.2012, 01:43]
супер
какраз что нужно было)
[14] kpbic86 [19.07.2012, 09:45]
Не подскажете как сделать плавную прокрутку div'а со скроллом?
как вот на этом сайте например http://outdoor.sdsmedia.ru/

Заранее ОГРОМНОЕ СПАСИБО!
[15] likbezz [19.07.2012, 13:46]
kpbic86,
Не подскажете как сделать плавную прокрутку div'а со скроллом?

Вообще-то про это вся тема)
scrollTo
Пример прямо по центру)


Полная версия сайта