Участник:Serpent Vlad/topscroll.js

Материал из Википедии — свободной энциклопедии
Это старая версия этой страницы, сохранённая Serpent Vlad (обсуждение | вклад) в 17:38, 28 апреля 2014 ( Новая страница: «→‎* Scrolling to top -- 23 November 2012 * Stolen from http://habrahabr.ru/post/146049/: $('body').append("<div class='to-top' title='На…»). Она может серьёзно отличаться от текущей версии.
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигации Перейти к поиску
/*
 * Scrolling to top -- 23 November 2012
 * Stolen from http://habrahabr.ru/post/146049/
 */
$('body').append("<div class='to-top' title='Наверх'>↑</div>"); // Создаем элемент на странице
 
$(window).scroll( function() {
   if ( $(this).scrollTop() > $(window).height() ) { // Если длина прокрутки страницы больше высоты экрана, то...
      $('.to-top').fadeIn(); // Показать кнопку
   }   else   { // Если нет, то...
      $('.to-top').fadeOut(); // Скрыть кнопку
   }
});
 
$('.to-top').on('click', function() {
   $('html, body').animate({scrollTop : 0}, 800); // По клику на кнопку прокручиваем страницу вверх
   return false;
});
 
mw.util.addCSS('.to-top { position: fixed; top: 0; bottom: 0; left: 0; padding:.7em; font:20px PT Sans,Tahoma,Verdana,sans-serif; color:#4d7285; height:100%; -moz-opacity: 0.3; filter: alpha(opacity=30); opacity: 0.3; display:none; } .to-top:hover { -moz-opacity: 0.9; filter: alpha(opacity=90); opacity: 0.9; cursor: pointer; background: #f0f0f0; }');