Последние темы на форуме:

Скроллинг - минимум кода и без графики

Информация о материале
Родительская категория: Полезное
Категория: Сайтостроительство – немного html и css
Просмотров: 3774
4.005882352941212345 Рейтинг: 4.01 (170 голосов)

Простой красивый скроллинг для сайта

прокрутка страницы  Озадачился давеча проблемой прокрутки страницы из футера (трюма) до ее начала (верхней палубы). Решений огромное количество, но что-то все не то что надо...
  А надо такое, чтобы не было графики - нафик усугублять красоту лишними http запросами к серверу. В принципе можно ее запихнуть в спрайт (css sprite), но у меня в дизайне спрайта графики пока нет, поэтому надо было обойтись без картинок. От одного отпилил одно, от другого третье - соединил и дотюнил.
  Получилось красиво и негромоздко - минимум кода, ни одного нового файла и полное отсутствие графических файлов.

  Учитывая то, что у меня уже подключен iQuery - кнопки будут появляться и плавно исчезать. Т.е. после скроллинга страницы вниз пропадет кнопка «↓Вниз», а после скроллинга страницы вверх, за ненадобностью исчезнет кнопка «↑Вверх».   Все работает и без iQuery, но тогда прокрутка страницы будет не плавная, а скачкообразная.
  Скролл страницы полноценно работает на Opera, Mozilla и Crome, Internet Explorer 9 края у кнопок не закругляет, прокручивает скачкообразно - на ишаке я не заморачивался - т.к. ишаковладельцам это всяко лучше, нежели колесо мыши крутить.

  Действия по установке скролла будут описаны применительно к Joomla!, но это не мешает приколхозить ко всему, что именуется "сайт".

  1. Подключаем iQuery. Есть мнение, что iQuery должен грузиться первым. Поэтому открываем index.php и между тегами <head> и </head> подключаем скрипт, например так: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

  2. css проходит проверку по стандарту CSS3. В css файл стилей шаблона добавляем стили кнопок: 

.go_deck{background-color:#F8F8F8;background:linear-gradient(to bottom,#cce8ff,#8b8f92);border:1px solid #eee6e6;border-radius:10px 0 0 6px;color:#777;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;margin-top:110px;padding:7px 4px 7px 6px;position:fixed;right:0;text-shadow:0 1px 0 rgba(255,255,255,0.506);top:50%;width:80px;z-index:2;}
.go_hold{background-color:#94b2d5;background:linear-gradient(to bottom,#d8d3cc,#036);border:1px solid #eee6e6;border-radius:6px 0 0 10px;color:#777;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;margin-top:150px;padding:7px 4px 7px 6px;position:fixed;right:0;text-shadow:0 1px 0 rgba(255,255,255,0.506);top:50%;width:80px;z-index:2;}

  3. В js файл скрипта, который грузится с шаблоном добавляем код плавной прокрутки страницы и исчезновения ненужной кнопки. Код скрипта для уменьшения размера почищен JS Minifier.
  Если iQuery не подключен - этот шаг пропускаем. 

//Плавная прокрутка страницы верх-вниз
jQuery(function(){$("#go_deck").hide().removeAttr("href");if($(window).scrollTop()>="250")$("#go_deck").fadeIn("slow")
$(window).scroll(function(){if($(window).scrollTop()<="250")$("#go_deck").fadeOut("slow")
else $("#go_deck").fadeIn("slow")});$("#go_hold").hide().removeAttr("href");if($(window).scrollTop()<=$(document).height()-"999")$("#go_hold").fadeIn("slow") $(window).scroll(function(){if($(window).scrollTop()>=$(document).height()-"999")$("#go_hold").fadeOut("slow")
else $("#go_hold").fadeIn("slow")});$("#go_deck").click(function(){$("html, body").animate({scrollTop:0},"slow")})
$("#go_hold").click(function(){$("html, body").animate({scrollTop:$(document).height()},"slow")})});

  4. Кнопки для прокрутки страницы вверх и вниз надо размещать в самом конце шаблона (страницы) перед закрывающим тегом </body>. Это позволит увеличить скорость загрузки основного содержимого Вашего сайта, т.к. кнопки скроллинга будут грузиться последними. 

<!--Код кнопок Вверх Вниз-->

<a href="#top" class="go_deck" id="go_deck">&#8593; На палубу</a>
<a href="#footer" class="go_hold" id="go_hold">&#8595; В трюм</a>

  Учитывая водномоторную тематику сайта, футер назовем трюмом (hold), а top перефразируем в верхнюю палубу (deck).
  Теперь после такой огромной проделанной работы смело идем пить пиво - трудовой день окончен!

Комментарии  

+4 #1 Максим 17.11.2014 17:29
А где код в п. 1 и п.4?? Без этого невозможно установить скроллинг.
+3 #2 Valery 17.11.2014 17:33
Что-то где-то отвалилось при переезде. Т.е. код в блоке есть, но он не выводится - через ПКМ его видно.
Поправлю обязательно.
Большой сенкс!

В принципе - по коду этой страницы можно посмотреть, т.к. используется тут.
+3 #3 Максим 19.11.2014 16:31
Спасибо! И всё-таки лучше дополнить п.1 и п.4..... :-)
+3 #4 Valery 04.03.2015 08:08
Только сейчас смог сделать - хз по какой причине вставленный код хтмл в странице начинал работать не как текст, а как хтмл.
Сделал так: вставил как текст в Dreamweaver, а скопировал - как код.

Добавить комментарий

Коммент без ссылок, символов, кодов и прочей ереси!

Похожие статьи: