• Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты jQuery, Примеры на jQuery и подобное » Плавная прокрутка до заданного блока. jQuery. (Как сделать прокрутку до нужного блока по якорю?)
Плавная прокрутка до заданного блока. jQuery.
Дата: Четверг, 22.03.2012, 11:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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>


 
Дата: Четверг, 22.03.2012, 11:08 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Везде )))
Одни косяки.
Code
jQuery(this).val();
- нет у ссылки атрибута «value»
Code
jQuery.scrollTo("#"+str);
- у якоря <a href="#fb"> - уже есть решётка - «#fb»
Сам скрипт расположен до блоков которые обрабатывает, а должен после, либо через $(document).ready();
Нет самого плагина $scrollTo();
... Ну, вроде всё ... но тут каждой ошибки хватит что бы скрипт не работал )))
...


 
Дата: Четверг, 22.03.2012, 11:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Короче.
Вот краткая инструкция:

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)

 
Дата: Вторник, 27.03.2012, 00:25 |
Krem-Brule
Сержант
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline


спасибо!

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

 
Дата: Вторник, 27.03.2012, 17:45 |
Krem-Brule
Сержант
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline


ну прокрутку с фффектом... скорость, амплитуда....

 
Дата: Вторник, 27.03.2012, 17:50 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Krem-Brule,
Quote (Krem-Brule)
ну прокрутку с фффектом... скорость, амплитуда....

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


scrollTo
...


 
Дата: Вторник, 27.03.2012, 17:54 |
Krem-Brule
Сержант
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline


. easeOutBounce

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

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

 
Дата: Вторник, 27.03.2012, 17:55 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Krem-Brule, Вот здесь: http://demos.flesler.com/jquery/scrollTo/ перечислены доступные эффекты данного плагина
...


 
Дата: Вторник, 27.03.2012, 18:06 |
Krem-Brule
Сержант
Группа: Проверенные
Сообщений: 33
Награды: 0
Репутация: 1
Статус: Offline


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

$.scrollTo('str',1000, {easing:'elasout'} );


 
Дата: Вторник, 27.03.2012, 19:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Krem-Brule,
Quote (Krem-Brule)
$.scrollTo('str',1000, {easing:'elasout'} );

Да, типа того, только str не строка, а объект.
... Если нужны другие эффекты, что не присутствуют в стандартном JQ их можно подключить отдельно.
...


 
Дата: Пятница, 11.05.2012, 17:03 |
nikki4
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


а можно ли как-то сделать, чтобы прокрутка была при нажатии на обычную кнопку?
Code
<input type="submit" value="ok">


Сообщение отредактировал nikki4 - Пятница, 11.05.2012, 17:57
 
Дата: Пятница, 11.05.2012, 20:02 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


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.
...

Можно не только к кнопке, а вообще к любому элементу и событию.
...


 
Дата: Пятница, 29.06.2012, 01:43 |
nick1594
Майор
Группа: Проверенные
Сообщений: 91
Награды: 0
Репутация: 0
Статус: Offline


супер
какраз что нужно было)


 
Дата: Четверг, 19.07.2012, 09:45 |
kpbic86
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Не подскажете как сделать плавную прокрутку div'а со скроллом?
как вот на этом сайте например http://outdoor.sdsmedia.ru/

Заранее ОГРОМНОЕ СПАСИБО!


 
Дата: Четверг, 19.07.2012, 13:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kpbic86,
Не подскажете как сделать плавную прокрутку div'а со скроллом?

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


 
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты jQuery, Примеры на jQuery и подобное » Плавная прокрутка до заданного блока. jQuery. (Как сделать прокрутку до нужного блока по якорю?)
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск:


Мобильная версия