КНОПКИ И ПЛАВНАЯ ПРОКРУТКА ВВЕРХ И ВНИЗ СТРАНИЦЫ.

Written by
  • 3 года ago

HTML код кнопок выглядит так:

Для реализации указателей направления прокрутки – стрелок, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега. Такой подход позволяет обойтись без использования изображений, добавляя плюс к оптимизации, а также позволяя легко настроить и, по необходимости, быстро изменить внешний вид кнопок.

При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы – должна быть UTF-8;

2) проверить данный символ на кроссбраузерность – отображается ли он во всех браузерах, бывает, что нет;

HTML-код размещаем где удобно в шаблоне, внешний вид и расположение кнопок задается в CSS

Благодаря фиксированному позиционированию кнопки будут находится, так сказать, всегда под рукой, и теперь остается только добавить скрипт jQuery, который по клику будет плавно прокручивать страницу в вверх или вниз:

Значение 250 в скрипте, показывает:
– в первой строке – кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
– во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.

Capture070

Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Menu Title