Наверх
Логотип кафедры РКС УИПА
05:58
25.11.2017
Суббота
Доброй ночи, Гость

Вход
Регистрация
   

Кнопка "Наверх" для сайта

Такая удобная и очень нужная кнопочка. Как же ее добавить на свой сайт? Легко и просто. Немного JQuery, HTML и конечно же CSS.

Итак, начнем. 

Как это обыно делается, опредлимся чего именно мы хотим, потому что заявление "Хочу ВОТ ТАКУЮ кнопочку" даже гугл не поймет. Необходимо четко представлять, чего именно Вы ходите добиться.

Сформулируем нашу задачу: "Необходимо, чтобы на сайте появлялась кнопка. При прокрутке страницы до определенного места и при нажатии на эту кнопку страница должна мгновенно прокрутиться к началу без перезагрузки. При прокрутке ниже указаного места кнопка должна быть видна. При обратной прокрутке выше указаного места кнопка должна исчезнуть". Вот как-то так.

Разобьем нашу задачу на более мелкие задания:

1. Нарисовать кнопку в определенном месте, чтобы она оставалась на месте при прокрутке страницы;

2. Определить позицию, после прокрутки которой кнопка должна появляться;

3. Сделать, чтобы кнопка появляась при прокрутке ниже указанного места;

4. Сделать, чтобы кнопка исчезала при прокрутке выше указанного места;

5. Добавить обработчик щелчка по кнопке, который прокрутит страницу к началу.

Ну, вот теперь задача должна быть понятной и можно искать решение каждой отдельной подзадачи. Приступим.

 

Рисуем кнопку в определенном месте, чтобы она оставалась на месте при прокрутке страницы.

HTML

< !-- Приблуда "Наверх"-- >
      < div title='Кликните, чтобы прокрутить страницу наверх' id='up_button' >
            Наверх
      < /div >
< !--/Приблуда "Наверх"-- >

Пояснение: Рисуем обычный див и пишем в нем нужный текст, или вставляем картинку. Это уже как Вам больше нравится. Не забываем указать id кнопки. Нам с ней дальше работать!

CSS

#up_button{
    text-align:center;       // Выравниваем текст по середине (если нужно)
    padding-top:20px;    // Задаем отступ от верхнего края страницы
    font-size:2em;           // Задаем размер шрифта
    width:200px;              // Задаем ширину кнопки
    color:#999;                // Задаем цвет текста
    height:100%;            // Задаем высоту кнопки размеров в экран или страницу, не суть важно
    position:fixed;           // Фиксируем кнопку на странице (прокрутка на нее не влияет)
    cursor:pointer;         // Задаем тип курсора "Указатель"
}

Пояснение: Думаю, из комментариев все понятно.

#up_button:hover{
    color:#fff; // Меняем цвет текста
}

Пояснение: Обрабатываем событие "Выделение" для кнопки. Изменять стиль можете по своему вкусу.

Примечание: Располагайте кнопку выше всех элементов страницы. Сразу после тега body!!! Иначе не сможете ее правильно позиционировать.

 

Определяем позицию, после прокрутки которой кнопка должна появляться.

Что под этим имеется в виду? А то, что кнопку предполагается отображать, например, слева под блоком меню. А меню, например, двухуровневое и при раскрытии одного из пунктов его высота изменяется. Поэтому постает задача определить высоту блока меню в конкретный момент времени.

Делается это вот так:

< script type='text/javascript' >
      var h_left_bar=parseInt(document.getElementById('left_bar').clientHeight);
< /script >

Пояснение: При помощи jscript определяем клиентскую высоду элемента left_bar (наше меню), округляем ее до целого и сохраняем в переменную h_left_bar.

Если же у Вас статическое одноуровневое меню или левый блок статического размера, то можно так не заморачиваться, а просто взять его высоту в пикселях.

 

Делаем, чтобы кнопка появлялась при прокрутке ниже указанного места и исчезала при прокрутке выше указанного места.

Для обработки прокрутки страницы в JQuery есть событие scroll объекта window. Для реализации необходимой нам функции просто необходимо при возникновении события прокрутки страницы проверить не прокрутили ли мы страницу ниже нужного места.

Чтобы использовать JQuery, необходимо скачать эту библиотеку на хост сайта и подключить:

< script type='text/javascript' src='jquery.min.js' >< /script >

Далее собственно наш код:

< script type='text/javascript' >
      $(window).scroll( function (){   //Обавляем обработчик события прокрутки страницы
            var scrolledpx = parseInt($(window).scrollTop()); // Определяем количество прокрученных пикселей
            var h_left_bar=parseInt(document.getElementById('left_bar').clientHeight); // Определям высоту левого блока (см. выше)
            if(scrolledpx >= h_left_bar+100) // Если прокручено столько-то пикселей от начала страницы
            {
                  document.getElementById('up_button').style.display='block'; // Отображаем кнопку
            }
            else
            {
                  document.getElementById('up_button').style.display='none'; // Скрываем кнопку
            }
      });
< /script >

Пояснение: все написано в комментариях. Думаю, все и так понятно.

Примечание: Каждый браузер имеет свой шаг прокрутки, поэтому в условии (scrolledpx >= h_left_bar+100) добавлено +100 к высоте блока. Подберите это значение экспериментально путем открытия сайта в различных браузерах.

 

Добавляем обработчик щелчка по кнопке, который прокрутит страницу к началу.

< !-- Приблуда "Наверх"-- >
      < div id='up_button' title='Кликните, чтобы прокрутить страницу наверх'
                onclick='this.style.display="none";$(window).scrollTop(0);' > // Обработчик клика
                        Наверх
       < /div >
< !--/Приблуда "Наверх"-- >

 

Вот собственно и все!

Посмотреть как работает данный пример, Вы можете переместив взгляд левее. Кнопочка слева вверху. 

Пробуйте. Делайте Ваш сайт лучше!


Рубрика: Web programming

Авторы: Коваленко Н. А.
Опубликовано: 27.11.11 07:16

Н р а в и т с я ?    Р а с с к а ж и    Д р у з ь я м !

Сдесь должны появиться кнопки социальных сетей

Комментарии могут оставлять только зарегистрированные пользователи.
Войдите под своим логином, чтобы оставить комментарий.


-iren-
Студент
Нет фото


А мне больше всего в этой кнопке (конкретно на этом сайте) нравится подпись, когда на нее наводишь))) "кликните, чтобы прокрутить страницу наверх (специально для dimko_p)....

Опубликовано: 05.12.11 12:09:17

vasutin
Студент
Нет фото


>А так вещь нужная, ибо "пэйдж ап" не всегда пашет.

Почему это? Что-то с клавиатурой?

Удобней использовать Shift+Space, чем Page Up.

А вообщето наверх это кнопка Home.

Опубликовано: 30.11.11 12:44:40

ktimus
Студент
Нет фото


>pravitel

Аффтар жжот!

 

А так вещь нужная, ибо "пэйдж ап" не всегда пашет.

Опубликовано: 29.11.11 16:56:32

kotelevets
Студент
Нет фото


Для начало ,нужно сайт свой создать=))А уж потом и попробывать можно=)))

Опубликовано: 29.11.11 02:08:42

IceCold
Студент
Нет фото


Та не гоните,Серега еще какой сайт создаст..)  Завидывать будете...)

Опубликовано: 29.11.11 01:37:19

vasutin
Студент
Нет фото


>Возьму на заметку!

Просто LOL

pravitel, у тебя наверно в блокнотике набор фраз для комментариев подготовлен. Ты хоть бы постарался...

Опубликовано: 28.11.11 14:32:59

pravitel
Студент
Нет фото


Возьму на заметку!

Опубликовано: 28.11.11 14:07:28

dimko_p
Администратор
Нет фото


> pravitel

Сначала сайт свой надо написать, а потом уже пробовать кнопочки разные прикручивать!

Опубликовано: 28.11.11 02:42:31

pravitel
Студент
Нет фото


Надо обязательно попробовать!

Опубликовано: 27.11.11 12:55:10

   
  Случайное фото  
 
     
  Популярные статьи  
Ускоряем 3G интернет. 3G Антенна своими рукамиОпрос студентов кафедры РКС. Отзывы студентов об УИПА (Видео)Поздравляем с Днем Рождения!!!Выставка морских раковин "Планета Океан" в галерее "АВЭК"Правила поведения в общественных местах. Административные правонарушенияСветодиодная цветомузыка для компьютераСтенгазеты студентов кафедры к празднику 8 марта 2012 годаПоздравляем с Днем рождения!!!
     
Loading
  Полезные ссылки  
  • Официальный сайт УИПА
  • Сайт Библиотеки УИПА
  • Дистанционное обучение
  • Сервисный Центр FreshIT
  • Веб-студия Around
  • FreshIT Partners Group
  • Заправка картриджей Харьков
  •      
    Система Orphus



    Tips&Tricks
    Web programming
    Жизнь студентов
    Интересные факты
    Мероприятия
    Молодые ученые
    Общежитие
    Объявления
    Свободный софт
    Технический раздел
    Компьютерные системы и сети
    Телекоммуникации и связь
    Преподаватели кафедры
    Трудоустройство
    Дни открытых дверей
    Copyright © 2010 - 2017. created by nick