20:09 Вторник 2025
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Время в профиле прош... (0)
КПК - персональная с... (0)
Вид цитаты и code st... (0)
СТАЛКЕРСКИЙ МИНИ-ПРО... (0)
БЛОК ИНТЕРЕСНЫХ ФАКТ... (0)
Гид по Народной Соля... (27)
Бар «От заката до ра... (18)
Гид по прохождению м... (16)
Азы модостроения (14)
Баги и ошибки на сай... (8)
XemorDio(died) (626)
Бармен (146)
ExGooD (48)
habib (37)
Rayviner (19)
maksimstebnovskij5 (02.03.2023)
slitkovets (30.10.2022)
ianoiano62 (29.01.2022)
Timkalv (20.09.2021)
Myloisonau (03.09.2021)

  • Страница 1 из 1
  • 1
Плавная кнопка вверх для uCoz
XemorDio(died)Дата: Четверг, 21.01.2016, 10:00 | Сообщение # 1
Генерал-лейтенант
Группа: Свобода
Сообщений: 626
Награды: 3
Репутация: 4
Статус:


Вот такая кнопочка (вы можете видеть её в левом нижнем углу моего сайта, когда прокрутите страницу вниз), я считаю, должна быть на каждом сайте! Ещё бы, она так облегчает просмотр длинных страниц – не надо крутить страницу опять вверх, чтобы вернуться к меню, а нажал на кнопочку и – ты уже в начале страницы! К тому же это так красиво – страница красиво и плавно проматывается вверх, приятно смотреть Кнопочка размером 40x40, скрипт очень легкий и вы сможете спокойно подогнать под свой сайт.

Для начала в таблицу стилей вставляем код:
Код
.scrollup{width:40px;height:40px;position:fixed;bottom:200px;left:160px;display:none;text-indent:-9999px;background: url('http://webmaster-ucoz.ru/w-u/img/vverkh.png') no-repeat;opacity:0.5;}   
  .scrollup:hover{opacity:0.7;}


bottom:200px; - отступ с низу
left:160px; - отступ слева
http://webmaster-ucoz.ru/w-u/img/vverkh.png - картинку кнопки можете заменить на свою

В нижнюю часть сайта:
Код
<!-- <Вверх> -->   
  <a href="#" class="scrollup"></a>   
  <script type="text/javascript">   
  $(document).ready(function(){   
  $(window).scroll(function(){   
  if ($(this).scrollTop() > 700) {   
  $('.scrollup').fadeIn();   
  } else {   
  $('.scrollup').fadeOut();   
  }   
  });   
  $('.scrollup').click(function(){   
  $("html, body").animate({ scrollTop: 0 }, 600);   
  return false;   
  });   
  });   
  </script>   
  <!-- </Вверх> -->
 
  • Страница 1 из 1
  • 1
Поиск: