Делаем кнопку “Наверх” для сайта

| 22.06.2014 | 15 комментариев

В этом посте мы с вами сделаем кнопку "Наверх", ее суть - это появится при прокрутке сайта вниз и при нажатии на ее, отправить пользователя на верх текущей страницы. Думаю объяснять много не стоит мы все встречали подобные кнопки "наверх" на многих сайтах.

План по созданию кнопки "Наверх"

1. Создадим html структуру для данной кнопки.
2. Стилизуем ее. Сделаем ее невидной и разместим правее относительно края страницы сайта.
3. Напишем скрипт, который будет отображать кнопку после прокрутки и обрабатывать нажатие пользователем на саму кнопку "Наверх"

Итак с планом действий по созданию кнопки наверх все понятно, приступим к его реализации 🙂

1. Создадим html структуру для кнопки "Наверх"

Структура для кнопки "Наверх", максимально проста. Состоит она из одного блока с id="back-to-top"
внутрь этого блока я поставил иконку указателя вверх, можно вместо этого написать слово "Наверх" или разместить спецсимвол html, на ваше усмотрение.
Что касается используемой мною иконки, то об этом у меня есть статья "Удобные иконки для сайта в шрифте Font Awesome"

<div id="back-to-top">
	<i class="fa fa-chevron-up"></i>
</div>

Код кнопки поместим перед закрывающимся тегом

2. Стили для кнопки "Наверх"

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

/* Back to top button */
#back-to-top{
	position:fixed; 
	z-index: 999; 
	display:none; 
	bottom:70px; 
	right:15px; 
	cursor:pointer;
}
#back-to-top i{
	width: 50px; 
	height: 50px; 
	display:block; 
	color: #fff; 
	background: #26ADE4 ; 
	text-align:center; 
	font-size:16px; 
	line-height: 50px; 
	border-radius: 5px;
	-webkit-transition:  .3s all;
	   -moz-transition:  .3s all;
	    -ms-transition:  .3s all;
	     -o-transition:  .3s all;
	        transition:  .3s all;
}
#back-to-top i:hover{background:#333;}

3. Скрипт для кнопки "Наверх"

Для начала объявим несколько переменных. Первая limit - будет содержать значение 1/3 высоты экрана и служить условием для появления нашей кнопки "Наверх".
Вторая backToTop - будет хранит jQuery выборку нашей кнопки, чтобы не обращаться к ней по несколько раз.

	var limit     = $(window).height()/3,
	    $backToTop = $('#back-to-top');

Напишем условие для появление и исчезновения нашей кнопки. Условие в нашем случае будет заключаться в проверке того прокрутил ли пользователь треть экрана или нет.
Если прокрутил, то кнопка "Наверх" - появится, если нет или вернулся на самый верх, то она исчезнет.

$(window).scroll(function () {
	if ( $(this).scrollTop() > limit ) {
		$backToTop.fadeIn();
	} else {
		$backToTop.fadeOut();
	}
});

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

	// scroll body to 0px on click
	$backToTop.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1500);
		return false;
	});

Вот так выглядит весь код целиком

	var limit     = $(window).height()/3,
		$backToTop = $('#back-to-top');

	$(window).scroll(function () {
		if ( $(this).scrollTop() > limit ) {
			$backToTop.fadeIn();
		} else {
			$backToTop.fadeOut();
		}
	});
	
	// scroll body to 0px on click
	$backToTop.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1500);
		return false;
	});

Заключение

Вот мы и закончили работы над созданием кнопки "Наверх". Это всего лишь один из вариантов, разнообразить который вы можете с помощью внесения правок в CSS часть данного поста.
В демо-статье использовались CSS эффекты описанные в этом посте "Библиотека CSS анимации"

(6 голосов. Рейтинг: 5,00 из 5)
Загрузка...

Метки: , ,

Рубрика: CSS, HTML, jQuery

Комментарии (15)

| RSS комментария

  1. Игорь:
    15.08.2014 в 16:00

    Демо не для той страницы

    Ответить
  2. Игорь:
    15.08.2014 в 16:01

    а нет, для той. сори

    Ответить
    • WebCo:
      15.08.2014 в 16:04

      ничего страшного, этот демо-пример и вправду имеет отвлекающие взгляд эффекты появления текста 🙂
      можно и не заметить кнопку наверх в правом нижнем углу.

      Вам спасибо, что комментируете.

      Ответить
  3. Programix:
    10.09.2014 в 18:23

    В статье var limit = $(window).height/3,
    backToTop = $(‘#back-to-top’);
    А в демо var limit = $(window).height()/3,
    backToTop = $(‘#back-to-top’);
    Исправьте ошибку

    Ответить
  4. Swaaarm:
    16.09.2014 в 16:40

    WebCo:
    Пришел к вам на сайт по теме статьи) Но подпрыгивающие блоки жуть как зацепили)))
    Как реализовать такое удовольствие? 2 часа копаюсь в коде не могу разобраться!)
    Где идентификатор #xe1 ? и вообще как это сделать?)

    Ответить
    • WebCo:
      16.09.2014 в 17:07

      Здравствуйте!
      Согласен с вами анимация завораживает ))
      Ознакомтесь с этой статьей – Библиотека CSS3 анимации.

      Суть использование в следующем: добавили к себе библиотеку анимации и после этого с помощью скриптика к нужному блоку, цепляем класс animated и класс нужного эффекта.

      Сегодня постараюсь написать статью о появлении блоков сайта с CSS3 эффектами. Можете заказывать что именно вас интересует 😉

      Ответить
      • Swaaarm:
        17.09.2014 в 08:59

        Реализация “игривых” блоков в любом исполнении всегда притягивает взгляд. С удовольствием погрузился бы в их глубокое разнообразие)

        Ответить
  5. Aleksandr:
    26.10.2014 в 16:48

    Я сделал внизу страницы кнопку “вверх” на основе div и, руководствуясь вашей статьёй, попытался сделать скроллинг на начальную позицию. Возникла следующая проблема.
    Метод animate почему-то не срабатывает, если сделать, как у вас. Но, если внутри обработчика click вызов метода делать не так $(‘body’).animate…, а перед обработчиком создать переменную var body = $(‘body’); а в обработчике клика написать body.animate… то всё работает как задумывалось.
    Почему так может происходить (сам я новичок в JavaScript)?
    Может ли причиной быть более новая версия jQuery?

    Ответить
    • WebCo:
      27.10.2014 в 09:16

      Здравствуйте, вообще-то должно работать и так и так 🙂
      Тот вид в котором у вас код сейчас – очень не плох, выносить используемые элементы дом в переменные – это хорошо, но для них стоит сделать название переменной с символом $ в начале, чтобы отличать jQuery переменные от переменных с простыми значениями, например:

      var $body      = $('body'),
    bodyWidth = $body.width();

      Можете кинуть свой код, я подумаю, что там не так…

      В моем примере функция возврата:

      backToTop.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1500);
		return false;
	});
      Ответить
  6. Aleksandr:
    30.10.2014 в 19:23

    Да, с переменными понял, спасибо за совет. Вот кусок кода. jQuery подключил в заголовке (сперва это было в конце, но перенес наверх при выяснении причины почему не срабатывал обработчик клика)
    <!– Дубль, в предыдущем сообщении съелись куски кода

    далее кусок бади, имеющий отношение к скролингу.

    …

    …

    var topScroll = $(‘#scroll-top’);
    var body = $(‘body’);

    topScroll.click( function () {
    body.animate({scrollTop:0}, 1000);
    return false;
    }
    );

    Вот это работает, как положено.
    А если вместо body.animate({scrollTop:0}, 1000); вызывать метод анимации так:
    $(‘body’).animate({scrollTop:0}, 1000); то не работает.
    !–>

    Ответить
  7. Марк Простой:
    01.08.2016 в 12:01

    Спасибо за статью.. хочу реализовать тоже кнопку подобную на ресурсе //myoi.ru. Возможно ли это так , что бы скорость загрузки страницы не уменьшилась ?

    Ответить
    • Дмитрий Британ:
      02.08.2016 в 17:07

      Там скрипта пару строк, на скорость загрузки страницы он не повлияет, внедряйте 🙂

      Ответить

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

«
»