Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Scriptaculous и плавный скроллинг

March 18th, 2008 | Category: Prototype, Script.aculo.us, Tutorial | Автор: Александр

script.aculo.us - web 2.0 javascriptСегодня покажу как сделать на странице скроллинг. Но не обычный, когда браузер просто прыгает на нужное место, а плавный скроллинг. Для этого скачаем и подгрузим на странице Prototype и Scriptaculous.



PLAIN TEXT
HTML:
  1. <script src="/javascripts/prototype.js" type="text/javascript"></script>
  2. <script src="/javascripts/effects.js" type="text/javascript"></script>

Теперь сделаем на странице DIV и дадим ему id. К этому элементу мы будем скроллить окно браузера. Это не обязательно должен быть DIV, а может быть что угодно, главное чтобы был id.

PLAIN TEXT
HTML:
  1. <div id="scroll_1"></div>

И теперь сделаем линк, при нажатии которого будем скроллить.

PLAIN TEXT
HTML:
  1. <a href="#scroll_1" id="scroll_link">Scroll me</a>
  2. <script type="text/javascript">
  3.   $('scroll_link').observe('click', function(e){
  4.     new Effect.ScrollTo('scroll_1');
  5.     e.stop();
  6.   });
  7. </script>



Чтобы посмотреть скрипт в деле - кликать СЮДА.

Подробнее про ScrollTo можно почитать тут.

del.icio.us Забобрить!

4 Comments so far

  1. slacker March 18th, 2008 10:45

    Прикольно! Возьму на заметку :)

  2. Константин March 18th, 2008 15:20

    Да, а самое интересное в том, что если у посетителя выключен javascript или по каким-либо другим причинам не работает, то ссылка сработает как закладка на #footer :)

  3. Константин April 22nd, 2008 16:54

    Мда, вот мне наконец-то и понадобился такой стиль скроллинга, только вот проблемка одна. Скролить нужно не вниз, а вправо - страничка горизонтальная.. Скачал новый скриптакьюлус, попробовал - увы, скролит только по вертикали :( может у кого есть другие идеи?

  4. xorbit July 7th, 2008 07:20

    Event.observe(window, ‘load’, function() {

    $$(’a[href^=#]:not([href=#])’).each(function(element) {
    element.observe(’click’, function(event) {
    new Effect.ScrollTo(this.hash.substr(1));
    Event.stop(event);
    }.bindAsEventListener(element))
    })

    })

Leave a reply