ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопки вверх и вниз прокрутки страницы

Кнопки вверх и вниз прокрутки страницы

Вашему вниманию несколько примеров по созданию кнопок для прокрутки страниц, как вверх, так и вниз, что в разном дизайне с использованием jQuery. Как понимаете, эти кнопки созданы для пользователей, чтоб можно было быстро поднять страницу, а если устанавливаете 3 эффекта, то и опустить страницу вниз. Где идет четыре примера, где можно выбрать, тот который больше подойдет по дизайну или фактуре.

Где в первом примере идет кнопка вниз, что с одной стороны оригинально, но это простая надпись, что можно прописать в дизайн сайта. Вторая аналогичной первой, только она уже будет поднимать страницу, так как также ее размещение идет в прописке, как пример footer на странице. Третий выстроен к стандартному виду, где появляется по правую сторону, и четвертый больше по дизайну схожий, как на сайте Vk.

Для скроллинга используется jQuery функция animate.

. animate(properties, duration, easing, complete);

Где идут обозначение на каждый функционал:

properties – свойства, которое задействует анимацию;
duration – значение по времени для анимации;
easing – вариант на анимацию, где задано по умолчанию swing, это замедление в самом начале и также при завершении, а вот linear идет на постоянную скорость;
complete – эта функция отвечает за вызов, что произойдет при завершение анимации.

Подключаем библиотеку на варианты:

Код

Кнопка «Вниз»

Стационарная ссылка, которая находится по месту для прокрутки страницы в низ страницы.

Кнопка «Наверх»: как создать с CSS и jQuery

HTML

Код

<div class="kontent_opisaniye">
<p><a href="#" id="sliding_down">v Вниз</a></p>
<p>Здесь находиться контент!</p>
</div>

CSS

Код

.kontent_opisaniye {
  width: 600px;
  margin: 0 auto;
}
p {
  color: #757070;
  font-size: 16px;
  line-height: 22px;
}
#sliding_down {
  font-weight: 700;
}

Код

$(function(){
  $('#sliding_down').click(function(){
  $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
  return false;
  });
});

На этом установка завершена.

Демонстрация

Кнопка «Наверх»

Аналогичная ссылка в надписи для прокрутки снизу вверх.

Кнопки прокрутки страницы вверх и вниз

HTML

Код

<div class="kontent_sayta">
  <p>Эффект поднятие страницы вверх.</p>
  <p><a href="#" id="podnyat_stranitsu"> Наверх</a></p>
  <br>
</div>

CSS

Код

.kontent_sayta {
  width: 800px;
  margin: 0 auto;
}
p {
  color: #777575;
  font-size: 16px;
  line-height: 21px;
}
#podnyat_stranitsu {
  font-weight: 900;
}

Код

$(function(){
  $('#podnyat_stranitsu').click(function(){
  $('html, body').animate({scrollTop: 0}, 600);
  return false;
  });
});

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

Демонстрация

Плавающая кнопка по правую сторону

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

Делаем кнопку

HTML

Код

<a href="#" id="podnyatiye_kontenta" title="Наверх"></a>
<div class="opisaniye">
<p>Кнопки прокрутки страницы вверх идет под описание на страницы с контентом.</p>
</div>

CSS

Код

#podnyatiye_kontenta {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  width: 31px;
  height: 31px;
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/scroll_top.png) 50% 50% no-repeat;
  border-radius: 50%;
  opacity: 0.5;
}
#podnyatiye_kontenta:hover {
  opacity: 1;
}

.opisaniye {
  width: 600px;
  margin: 0 auto;
}
p {
  color: #7d7a7a;
  font-size: 18px;
  line-height: 23px;
}

Код

$(function(){
  $(window).scroll(function(){
  if($(window).scrollTop() > 100) {
  $('#podnyatiye_kontenta').show();
  } else {
  $('#podnyatiye_kontenta').hide();
  }
  });

  $('#podnyatiye_kontenta').click(function(){
  $('html, body').animate({scrollTop: 0}, 600);
  return false;
  });
});

Эта кнопка по функций идет с плавным поднятием страницы.

Демонстрация

Панель с правой стороны

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

HTML

Код

<a href="#" id="podnyatiye_opisaniya"><span> Наверх</span></a>
<div class="soderzhaniye_sayta">
<p>Дизайн панели схожий на на социальной сети в контакте при поднятие страницы.</p>
</div>

CSS

Код

/* Наверх */
#podnyatiye_opisaniya {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90px;
  transition: background 0.2s ease;
  display: block;
  height: 100%;
  text-align: center;
  opacity: 0.5;
}
#podnyatiye_opisaniya span {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20px;
}
#podnyatiye_opisaniya:hover {
  background: #d8d2d2;
  opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
  #podnyatiye_opisaniya {
  display: none;
  }
}

.soderzhaniye_sayta {
  width: 495px;
  margin: 0 auto;
}
p {
  color: #5d5858;
  font-size: 17px;
  line-height: 20px;
}

Код

$(function(){
  $(window).scroll(function(){
  if($(window).scrollTop() > 100) {
  $('#podnyatiye_opisaniya').show();
  } else {
  $('#podnyatiye_opisaniya').hide();
  }
  });

  $('#podnyatiye_opisaniya').click(function(){
  $('html, body').animate({scrollTop: 0}, 600);
  return false;
  });
});

Здесь основа создана стандартно по ширине, где в сером оттенке с эффектом наведении клика.

Демонстрация

Как на сайте создать кнопку для прокрутки страницы вверх

Кнопка с функциями вверх и вниз страницу

С таким функционалом можно реализовать кнопку на любом тематическом сайте, ведь по умолчанию она на половину прозрачна, пока не навели на основу курсор.

HTML

Код

<div class="podusan_kontent">
  <a href="#" id="vedukas_klisan"><span> Наверх</span></a>
  <a href="#" id="knopka_vasumka"><span> Вниз</span></a>
</div>

<div class="stateyn_kontent">
  <p>Кнопки прокрутки страницы на сайте, где функция вверх и вниз с помощью jQuery</p>
</div>

CSS

Код

.podusan_kontent {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90px;
  transition: background 0.2s ease;
}
.podusan_kontent:hover {
  background: #eee;
}

/* Наверх */
#vedukas_klisan {
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0.5;
  transition: background 0.2s ease;
}
#vedukas_klisan span {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20px;
}
#vedukas_klisan:hover {
  background: #ddd;
  opacity: 1;
}

/* Вниз */
#knopka_vasumka {
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  opacity: 0.5;
  transition: background 0.2s ease;
}
#knopka_vasumka span {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
}
#knopka_vasumka:hover {
  background: #ddd;
  opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
  .podusan_kontent {
  display: none;
  }
}

.stateyn_kontent {
  width: 500px;
  margin: 0 auto;
}
p {
  color: #525050;
  font-size: 15px;
  line-height: 22px;
}

Код

$(function(){
  $('#vedukas_klisan').click(function(){
  $('html, body').animate({scrollTop: 0}, 600);
  return false;
  });

  $('#knopka_vasumka').click(function(){
  $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
  return false;
  });
});

Если вам нравится стиль функций поднятие страницы, как вконтакте, то здесь вы также можете опустить страницу к низу, и также поднять, где панель расположена с правой стороны.

Демонстрация

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

29 Октября 2019 Загрузок: 2 Просмотров: 4005 Комментариев: (1)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 29 Октября 2019 00:37¹ 0 Также к записи можно добавить красивые шрифтовые кнопки, что безусловно будет оригинальнее смотреться, хотя изначально шли эти ↑ и ↓ кнопки, что просто в начале ключевого слова добавляем.