Конечно это не относится к html а скорее к JavaScript. ScrollSpy это плагин для js-фреймворка MooTools отвечающий за разнообразные действия связанные со скорллом. За примером далеко ходить не надо, плагин TopOfPage для Joomla (о котором немного потом) использует именно этот плагин.

Подробно расписывать не буду: http://davidwalsh.name/mootools-scrollspy на сайте можно посмотреть демо и скачать исходники. Хоть на сайте имеется несколько примеров использования скрипта, приведу один здесь. А точнее тот самый TopofPage который показывает кнопку "Вверх" когда вы прокрутите страницу на определенное расстояние (а точнее пикселей) вниз.

И так открываем какойнибудь index.html и в любое место вставляем код:

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

Затем в style.css:

#gototop { display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:url(/wp-content/themes/walshbook/images/add_content_spr.gif) 5px -8px no-repeat #eceff5; color:#3b5998; font-size:11px; text-decoration:none; position:fixed; right:5px; bottom:5px; padding:7px 7px 7px 20px; }
#gototop:hover { text-decoration:underline; }

И наконец сам скрипт (в каком виде его вставлять решайте сами):

window.addEvent('domready',function() {
  /* smooth */
  new SmoothScroll({duration:500});
  
  /* link management */
  $('gototop').set('opacity','0').setStyle('display','block');
  
  /* scrollspy instance */
  var ss = new ScrollSpy({
    min: 200,
    onEnter: function(position,state,enters) {
      $('gototop').fade('in');
    },
    onLeave: function(position,state,leaves) {
      $('gototop').fade('out');
    },
    container: window
  });
});
 
  • Комментарии не найдены

Оставьте свой комментарий

Оставить комментарий от имени гостя

0
О сайте

Тут должна была быть написана различная информация о сайте но мы подумали что она никому, к черту, не сдалась и поэтому здесь был размещен этот текст. Тоже никому не нужный.