Главная » Файлы » Прочие скрипты » jQuery

Плавный скролл к нужному участку сайта с последующей подсветкой на jQuery 1.4.4
23.06.14, 12:02:37

Скачать файл




Данный плагин позволяет перейти к нужному участку сайта при нажатии на кнопку. После того, как страница опустится до нужного элемента, он подсветится нужным цветом

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/jquery.min.js"></script>  
  <script src="/js/jquery-ui.min.js"></script>  
  <script src="/js/jquery.slideto.min.js" type="text/javascript"></script>


Сразу после предыдущего кода вставляйте:
Код
<script>  
  $(document).ready(function(){  
  $("#default").click(function(){  
  $("#title7").slideto(  
  {highlight_color: "ffdd00",highlight_duration: 3000}  
  );  
  });  
  });  
  </script>


Немного поясню:

$("#default") - указываем ID для кнопки, которая будет запускать анимацию
$("#title7") - указываем ID элемента, к которому мы будем скроллировать пр нажатии на кнопку
highlight_color: "ffdd00" - цвет, которым будет подсвечиваться элемент после скроллинга
highlight_duration: 3000 - сколько времени будет видна подсветка

Следующий код в то место, где будет кнопка, запускающая анимацию:
Код
<button id="default">Перейти</button>


Сам контент, к которому будет сроллинг, обрамляем в дивы с нужным нам ID (В нашем случае это title7):
Код
<div id="title7">Здесь наш контент</div>


Осталось лишь залить три скрипта из прикреплённого архива в папку js

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Плавный, последующей, на, JQuery, 1.4.4, сайта, участку, скролл, подсветкой, нужному
Просмотров: 344 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: