scrollTwo — jQuery-плагин для плавной прокрутки


На основе решения для плавной прокрутки соорудился маленький jquery-плагинчик, код которого вот:
// Непосредственно сам плагин
(function($){
      $.fn.scrollTwo = function(speed) {
        return $(this).on("click",function(){
         var top_offset = $($(this).attr("href")).offset().top;
         $('html,body').animate({scrollTop: top_offset}, speed || 500);  
         return false;       
        });
      };
})(jQuery);

// Применение
$(".scrolltwo").scrollTwo(200);


Может принимать параметр speed — это скорость прокрутки в миллисекундах. Значение параметра по умолчанию: 500 мс. Умеет прокручивать только по нажатию на якорь, то есть отрабатывает только, если внутристраничная ссылка указывает на id какого-либо элемента на странице.

А вот  плагинчик в работе:

Решение для плавной прокрутки при нажатии на ссылке

Небольшой jquery-снипет, реализующий плавную прокрутку при нажатии на якорь  <a href="#id">якорь</a> к элементу указанному в атрибуте якоря. В общем уплавнение стандартного внутристраничного якоря.

Интересные CSS решения

Собралось тут немного интересных решений различных ситуаций на css и не только.

Размещение нескольких блоков по ширине контейнера. Может пригодиться, например, для горизонтального меню или еще чего-то подобного



Стандартное прибивание футера к низу страницы.




Простенький jquery-плагинчик для табов с примером разметки и стилей:




Плавающие блоки разной высоты, например, для списка товаров в интернет-магазине:




Вертикальное выравнивание блока или блок по центру страницы (ie6+):




Очень классное решение стилизации флажков (checkbox) и радиокнопок (radio) без javascript.
Но к сожалению основан на использовании псевдоклассов из css3-спецификации, поэтому не работает в старых браузерах.



И замечательный пример использования псевдокласса :checked для изменения содержимого тега label на лету без javascript