Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Кнопка вверх для сайта

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

Скрипты для uCoz 2017-Мар-18 proucoz 235 0

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

Установка

Итак, если у вас не установлен Awesome, разместите между тегами <head></head> на всех страницах сайта этот код:

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Теперь на всех страницах сайта перед закрывающим тегом </body> (либо в одном из глобальных блоков, например, «Нижняя часть сайта») разместите этот скрипт:

Код
<script> function _goTop() {  $('<span id="go-top" class="fa fa-angle-up" title="Вверх!"></span>').appendTo('body');  $('#go-top').css({  'opacity': '0',  'visibility': 'hidden'  });  $(window).scroll(function() {  if ($(this).scrollTop() > 500) {  $('#go-top').css({  'opacity': '1',  'visibility': 'visible'  });  } else {  $('#go-top').css({  'opacity': '0',  'visibility': 'hidden'  });  }  });  $('#go-top').click(function() {  $('body,html').animate({  scrollTop: 0  }, 800);  return false  }); };  _goTop(); </script>

Последним шагом будет установка стилей CSS в самый конец Таблицы стилей CSS:

Код
  /* кнопка наверх -----*/  #go-top {background-color: #90A4AE;  display: block;  position: fixed;  bottom: 20px;  right: 20px;  z-index: 9999;  color: #fff;  line-height: 30px;  height: 30px;  width: 30px;  text-align: center;  font-size: 16px;  cursor: pointer;  transition: all .3s ease;  border-radius: 50%; } #go-top:hover {  background: #4CAF50; }

Настройка

Изменить значение, после которого появится кнопка при прокрутке, можно в этом месте скрипта:

Код
  if ($(this).scrollTop() > 500) {

Вы также можете сменить иконку на любую нужную вам, просто измените класс fa-angle-up на класс другой иконки Awesome:

Код
$('<span id="go-top" class="fa fa-angle-up" title="Вверх!"></span>').appendTo('body');
Источник: https://proucoz.site/
0 комментариев
avatar