Кнопка «Наверх», покруче, чем в вконтакте

На сайте вконтакте в левом верхнем углу есть вот такая кнопка:

кнопка наверх вконтакте

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


Попробуем сделать что-нибудь подобное, но с некоторыми доработками. Копировать оттуда код я не собираюсь, напишу что-нибудь своё.

Обратите внимание, что пост опубликован в 2011-м году, с того времени кнопка вконтакте претерпела некоторые изменения, например:

  • появилась и исчезла возможность перехода на предыдущую страницу при прокрутке наверх,
  • в данным момент (2013 год) после прокрутки наверх, кнопка позволяет вернуться в то место на странице, откуда была совершена прокрутка;

Эти два варианта кнопки я подробно описал в следующем посту.

HTML кнопки

Сам HTML довольно прост и состоит из всего пары строк:

<div id="top-link">
	<a href="#top">наверх</a>
</div>

Вставляем этот код перед закрывающим тегом </body>. Если хотите, вы можете изменить ID блока и анкор ссылки, но при этом не забудьте их поменять также и в остальном коде.

Подключение CSS и JavaScript файлов

Для того, чтобы кнопка нормально функционировала, нам понадобятся:

  • немного стилей CSS,
  • библиотека jQuery,
  • и немного кода JavaScript;

Всё это мы подробно рассмотрим дальше в статье, а пока что разберемся, как правильно подключать их на сайт.

Проблем с CSS думаю возникнуть не должно — вы просто находите файл, в котором содержатся все основные стили сайта и вставляете туда код, который будет представлен в листингах ниже.

Что касается JavaScript, то я предлагаю рассмотреть два способа подключения — для WordPress и не для WordPress. начнем со второго.

Способ 1. Не для WordPress

Итак, здесь мы подключаем jQuery и какой-то js-файл, пока что пустой. Этот код вы можете поместить перед HTML, который мы вставляли в первом шаге.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button.js"></script>

Так, внимание, у многих были проблемы с подключением файла button.js — используйте абсолютный URL файла.

Способ 2. Для WordPress

Здесь всё обстоит иначе. Для подключения мы будем использовать функцию wp_enqueue_script(). Код ниже нужно вставлять в functions.php текущей темы:

function true_top_button_enqueue() {
	wp_enqueue_script( 'jquery' );
 	wp_enqueue_script( 'topbutton', get_stylesheet_directory_uri() . '/button.js', array('jquery'), null, true );
}
 
add_action( 'wp_enqueue_scripts', 'true_top_button_enqueue' );

Если вы будете использовать код из этого примера один в один, то файл button.js нужно будет засунуть непосредственно в папку с текущей темой. Для получения URL текущей темы в примере используется функция get_stylesheet_directory_uri().

Стили CSS

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

#top-link{
	cursor:pointer; /* изменяем указатель мыши при наведении на блок */
	display:none; /* скрываем блок с кнопкой, т.к. отображать надо только при прокрутке */
	position:fixed; /* фиксируем расположение */
	left:0px;
	top:0px;
	padding:0;
}
#top-link a{
	display:block; 
}

jQuery. Содержимое файла button.js

Сначала уясним несколько моментов:

  • кнопка должна приспосабливаться под разные разрешения экрана,
  • кнопка должна автоматически изменять свою ширину, если мы будем сужать или расширять окно браузера,
  • поддержка мобильных устройств;

Теперь смотрим код ниже, я специально вставил побольше комментариев, чтобы всё было понятно, в случае чего можете посмотреть демо или скачать весь код.

jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		var totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		var totalTopLinkWidth = jQuery(this).children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
			return false;
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
			return true;
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1 && topLink.toplinkwidth()) {
			topLink.fadeIn(300);
		} else {
			topLink.fadeOut(300);
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

Если что-то не будет получаться, оставьте свой вопрос в комментариях — я вам помогу.

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 222

  • Олег19 февраля 2012 в 12:02 #

    Один из лучших примеров, добавил себе на сайт.Спасибо!

  • @GlebVelikanov22 февраля 2012 в 12:02 #

    А чем круче ВК? =)

    • Миша23 февраля 2012 в 06:02 #

      плавная прокрутка, удобное расположение на экране, адаптация к изменениям размера окна браузера!)

  • Григорий7 марта 2012 в 15:03 #

    Решение некорректно работает на IE7

  • Владимир2 апреля 2012 в 15:04 #

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

    • Миша3 апреля 2012 в 05:04 #

      пожалуйста)

      #top-link:hover{
      	background:#fe0000; /* цвет фона */
      }
       
      #top-link:hover a{
      	color:#fff; /* цвет текста */
      }

      Только цвета надо будет поменять потом на те, которые надо)

  • Александр2 мая 2012 в 11:05 #

    Здравствуйте, как сделать чтобы страница прокручивалась наверх только при нажатии на слово "наверх"?

    • Миша2 мая 2012 в 23:05 #

      Привет!
      привязать событие к слову наверх, например

      $('#top-link a').click(function(e) {
             e.preventDefault();
             $.scrollTo(0,300);
         });

      заменить эти несколько строчек кода, она находятся почти в самом низу.

    • Миша2 мая 2012 в 23:05 #

      то есть было

      $('#top-link')

      а стало

      $('#top-link a')
  • Александр3 мая 2012 в 12:05 #

    Спасибо, щас попробую

  • slava3 мая 2012 в 19:05 #

    а как прилепить данную кнопку к правому углу?

    • Миша3 мая 2012 в 20:05 #

      проще простого)) поменять left:0 на right:0 в самом начале в CSS, примерно так:

      #top-link{
         cursor:pointer;
         display:none;
         position:fixed;
         right:0px;
         bottom:0px;
         padding-left:5px;
         padding-bottom:5px;
         z-index:1;
      }
  • Алех3 мая 2012 в 19:05 #

    Здраствуйте Миша выложите пожалуйста готовый скрипт в архиве

  • vegrecipe25 мая 2012 в 21:05 #

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

  • Max29 мая 2012 в 01:05 #

    Доброго времени суток. Скажите пожалуйста, какой код отвечает за треугольник рядом слова "наверх"? Спасибо.

    • Миша29 мая 2012 в 08:05 #

      Привет)
      Треугольник - это отдельная картинка, которая прописана в CSS, например вот как это выглядит на моём блоге:

      #toplink a{
      	background: url(s.png) -215px -165px no-repeat;
      }
      • Max29 мая 2012 в 22:05 #

        Миша выложите пожалуйста прямую ссылку на картинку. Спасибо.

      • Миша30 мая 2012 в 11:05 #

        ок, только картинка у меня не отдельная а в виде спрайта, если хочешь можешь обрезать truemisha.ru/assets/s.png
        а вообще эту стрелку можно сделать и в виде символа, вот так: ▲ &#9650;

      • Миша6 июня 2012 в 10:06 #

        вот ещё один вариант создания стрелки: https://truemisha.ru/blog/css/css-borders.html

  • Вадим9 июня 2012 в 21:06 #

    Миша, у тебя отличный блог и кнопочка "Наверх" работает замечательно)) Может ты пробовал её слегка доработать? Например, вконтакте безумно удобно кликать "вверх", а затем сразу "назад". И еще подскажи, криворукому, как все-таки позиционировать ссылку вверху странички. Заранее спасибо))

    • Миша10 июня 2012 в 06:06 #

      Спасибо, Вадим)
      чтобы после нажатия кнопка менялась на кнопку "Назад", нужно написать небольшой скрипт на jQuery, добавив что-то вроде этого:

      $('#top-link').click(function(){
      	var a = $(this).children('a');
      	a.text('назад').attr('href','javascript:history.go(-1)');
      });

      и потом останется сделать, чтобы кнопка не исчезала при прокрутке вверх, а при повторной прокрутке вниз снова менялась на кнопку "наверх", вот и всё)
      а для того, что засунуть кнопку в верхнюю часть страницы, тебе нужно поменять эту строчку:

      $('#top-link').css({'padding-top': $(window).height()});

      на эту:

      $('#top-link').css({'padding-bottom': $(window).height()});

      ну а в остальном можно будет подправить расположение при помощи CSS )

      • Вадим10 июня 2012 в 08:06 #

        Спасибо большое)) Кнопку в верхнюю часть страницы переместил успешно)
        К сожалению я ни разу не силен в программировании, поэтому

        и потом останется сделать, чтобы кнопка не исчезала при прокрутке вверх, а при повторной прокрутке вниз снова менялась на кнопку "наверх", вот и всё)

        - непосильная задача)) В инете очень много решений с кнопочкой "вверх" и ни одного с реализацией "назад"((( Может дополнишь свою статью? Я думаю, многие тебе за это были благодарны! Еще раз спасибо за отзывчивость)) Буду с удовольствием следить за твоим блогом))

      • Миша10 июня 2012 в 11:06 #

        окей, дополню, а может в отдельной статье напишу))

      • Вадим11 июня 2012 в 20:06 #

        Круто)) Буду ждать с нетерпением))) уже подписался на обновления))

  • Сергей15 июня 2012 в 11:06 #

    Спасибо за данный урок. То, что нужно!

  • Дмитрий18 июня 2012 в 11:06 #

    Давно искал! очень полезно! а как сделать чтоб как в контакте еще назад переход был? В комментах прочитал но не понял совсем :(

  • Данил23 июня 2012 в 19:06 #

    Как кнопку наверх сделать?

  • Alex25 июня 2012 в 00:06 #

    Одна я такая? :) но у меня не работает.. :( не переходит наверх... и чую, что ошибка в файле .js... а так и должно быть, что файл начинается с ;??? тот файл, что прикреплен в архиве тоже не работает. кнопка появляется, но наверх не переходит... :(

    • Миша25 июня 2012 в 08:06 #

      Привет, давай ссылку на свой сайт, я посмотрю в чем там дело)

      • Alex25 июня 2012 в 17:06 #

        newtwilight.ucoz.ru на. правда, девчока, которая пользуется Сафари, говорит, что у нее все работает :) а вот в опере и мозиле не переходит... :(

      • Миша26 июня 2012 в 07:06 #

        да, действительно, работает на хроме, но не до конца работает на мозиле и в опере)
        по сути не работает только эта часть кода

        $.scrollTo(0,300);

        но почему, хм))
        у тебя там jQuery два раза подключен, убери один из них, вдруг поможет)

      • Миша26 июня 2012 в 12:06 #

        тот файл, что прикреплен в архиве тоже не работает. кнопка появляется, но наверх не переходит… :(

        протестировал его в Опере и Mozilla, ты права, в них он не работает, сейчас я подготовлю новый вариант и пришлю его

  • Alex26 июня 2012 в 12:06 #

    Да ну я вижу, что эта строчка не работает :) Один из них уже убран :) но все равно не работает :(

    • Миша26 июня 2012 в 12:06 #

      всё, я нашёл ошибку, исправил её в самой статье и также перезалил архив) сейчас всё ок) спасибо что нашла баг)

      • Alex26 июня 2012 в 23:06 #

        Аааааа!!! :) Теперь все работает!!! :) Спасибо большое!!!! :)

      • Миша27 июня 2012 в 04:06 #

        Отлично!) пожалуйста! :)

      • Вадим12 июля 2012 в 15:07 #

        Миша, расскажи в чем была проблема? Что необходимо изменить в предыдущем варианте? С учетом, что у меня:

        $('#top-link').css({'padding-bottom': $(window).height()});

        Пробовал обновить button.js целиком и только первую строчку. Кнопка появляется, но активна только в углу страницы, вместо привычной всей левой стороны. Сайт еще не в инете. Но если необходимо, могу архивом скинуть. Поможешь?
        PS: кто-нибудь осилил кнопку "назад"??? Месяц уже она мне покоя не дает))

      • Миша12 июля 2012 в 22:07 #

        да, скинь пожалуйста ссылку на архив

      • Миша12 июля 2012 в 22:07 #

        кнопку назад я тебе сделаю, дай мне 3 дня на это)

      • Вадим12 июля 2012 в 22:07 #

        Миша, я уверен, ты сделаешь)) Просто спросил, может кто сам осилил)) Буду ждать)))

      • Миша17 июля 2012 в 15:07 #

        готово) тут с модификацией кнопки назад)
        truemisha.ru_top_back_button_jquery.zip

  • Вадим17 июля 2012 в 15:07 #

    Спасибо!))) Сейчас буду разбираться))

    • Ник17 октября 2012 в 13:10 #

      Миша, ссылка на измененный архив не рабоатет (https://truemisha.ru/files/truemisha.ru_top_back_button_jquery.zip) перезалей повторно, пожалуйста ))) Очень хочу такой скрипт как в ВК.

      • Миша17 октября 2012 в 14:10 #

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

      • Миша18 октября 2012 в 09:10 #

        файл перезалит, а статья выйдет ближе к обеду

  • Михаил25 июля 2012 в 09:07 #

    Огромное спасибо за скрипт! Миша, если не трудно, а как подключить твою кнопку к блогу на WordPress?

    • Миша26 июля 2012 в 20:07 #

      тут два варианта, в первом можно просто прописать всё в файлах темы, например:
      header.php - CSS-стили
      footer.php - HTML и jQuery
      второй вариант - затолкать все через хуки (а код вставлять в functions.php), вот как-то так:
      стили в хедер:

      add_action("wp_head", "wp_head_extra_code");
       
      function wp_head_extra_code() { ?>
      	<style>
      	все стили сюда
      	</style>
      <?php }

      а все скрипты и HTML пусть идут в футер:

      add_action("wp_footer", "wp_footer_extra_code");
       
      function wp_footer_extra_code() { ?>
      	 <!-- скрипты и HTML -->
      <?php }
    • Миша26 июля 2012 в 20:07 #

      особое внимание стоит обратить на относительные и абсолютные URL, с этой ошибкой уже сталкивались некоторые читатели блога)

  • Владимир26 июля 2012 в 11:07 #

    Миша, здравствуй! Обновил старый скрипт на новый который ты исправил, появилась следующая ошибка: при сжатии окна кнопка не пропадает а перескакивает на середину экрана. Исправь, пожалуйста.

    И еще один вопрос, какой параметр нужно изменить чтобы текст ссылки "Наверх" при изменении её расположения на Правую сторону тоже прижимался к правой части окна.

  • Владимир26 июля 2012 в 11:07 #

    Точнее добавлю, что эта ошибка появилась после того как я перенес кнопку в правую сторону при помощи right:0

  • Владимир26 июля 2012 в 11:07 #

    Прошу прощения, перескакивание текста на середину экрана с правого боку это моя ошибка, изменил параметр в CSS .veryhidden left:-5555px на right из-за этого и скакало, вернул обратно перескок пропал, но теперь при сжатии окна кнопка пропадает, а когда наводишь курсор в верхнюю часть появляется большое пустое поле сверху окна.

  • Владимир26 июля 2012 в 14:07 #

    Да уж, какая то загадка для меня, скачал ваш образец, добавил стили которые у меня, никакой полосы не появляется сверху, а у меня только right:0 поставь и тут как тут...

  • Сергей4 августа 2012 в 13:08 #

    Привет! А на blogger это можно сделать? Или не будет работать?

  • Александр12 августа 2012 в 10:08 #

    Здравствуйте, кнопка перестала работать в браузере google chrome

  • Дмитрий18 августа 2012 в 13:08 #

    Добрый день, кнопка не исчезает при изменении размеров окна, показывается поверх некоторых элементов. Проблема в css?

  • Дмитрий18 августа 2012 в 13:08 #

    Пардон, проблема в невнимательности))) Ошибся с синтаксисом. Все отлично работает. Спасибо за отличную кнопку))

  • серп31 августа 2012 в 21:08 #

    Объясните пожалуйста тупому) что куда вставлять...

  • noid14 сентября 2012 в 17:09 #

    Збс кнопка, буду ставить... Хотя, конечно если бы справа ещё такую же добавить, только "вниз", так было бы ваще крутотенюшка.[img]http://noid.su/fu/ofcourse.gif[/img]

  • Georgich15 сентября 2012 в 13:09 #

    Здравствуйте, все вроде бы получилось, но две проблемы:
    1) вместо слов "наверх-назад" какие-то иероглифы или квадратики;
    2) в Хроме не переходит вверх страницы.
    можете объяснить в чем дело? (отдельно ваш архивный вариант работает хорошо, а вот у меня после копирования нет)

    • Миша15 сентября 2012 в 20:09 #

      Привет!
      1. поменяй кодировку в файле на UTF-8 без BOM
      2. архивный вариант не работает(пока что) в новой версии хрома, используй вариант из статьи.

  • Сергей20 сентября 2012 в 12:09 #

    Привет. А вконтакте, когда кликнул наверх, после прокрутки наверх, появляется кнопка ВНИЗ. То есть можно вернуться обратно. Если на твоем коде можно такое добавить, подскажи плиз.
    Спасибо.

  • серпантин23 сентября 2012 в 16:09 #

    кнопка отображается только на главной, в чем может быть проблема?

    • Миша24 сентября 2012 в 00:09 #

      ну может у тебя какая-то часть кода только на главной добавлена) например, возможно ты код вставил только в index.php или front-page.php - если это WordPress.

  • серпантин24 сентября 2012 в 20:09 #

    бутон закинул в корневую папку на сервере, код вызова в футер, цсс в цсс)
    п.с. что не правильно сделал?

  • Илья27 сентября 2012 в 13:09 #

    Миша, привет!
    Поскажи, пожалуйста: добавил код кнопки в «подвал» сайта (footer.tpl в файлах OpenCart), в таблицу стилей и закинул button.js в каталог с js-скриптами. Но кнопки не видно :(
    В чем может быть проблема? Спасибо!

    • Миша29 сентября 2012 в 08:09 #

      хай)

      в таблицу стилей и закинул button.js в каталог с js-скриптами.

      думаю в этом) ты просто закинул их? не подключая?

      • Илья29 сентября 2012 в 23:09 #

        Вроде бы подключил:

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      • Илья1 октября 2012 в 23:10 #

        Теперь точно подключил. Убрал из таблицы стилей display:none; у #top-link и ссылка появилась на сайте. Google Chrome скрипт видит, но ругается в нем на строку
        Query.fn.topLink = function(settings) {
        "Query is not defined"
        Подскажи, пожалуйста, что здесь не так?

      • Миша2 октября 2012 в 06:10 #

        скрипты подключи и display:none не трогай))

  • Эдуард4 октября 2012 в 00:10 #

    Привет! как можно сделать чтобы при наведении на полоску прокрутки в левой части, как у меня на сайте, чтобы она меняла цвет и ее было видно, а то она у меня прозрачная, только текст наверх виден...
    Спасибо заранее! ;)

  • Сергей12 октября 2012 в 20:10 #

    Привет. У меня вопрос. Как сделать чтобы полоса не меняла размера при изменении экрана, а была например 100 пикселей фиксировано. А то я не могу найти где это прописано.

    • Миша16 октября 2012 в 14:10 #

      Прив! сорри за долгий ответ, вот:

      1. чтобы не изменяла размер, можно спокойно поудалять вот это:

      function mytoplink() { // функция проверки
      		var h = $(window).width()/2-974/2-102;
      		// 974 - ширина сайта (обычно #wrapper)
      		// 102 - ширина собственно кнопки
      		if(h&lt;0){
      			$('#top-link').addClass('veryhidden');
      			// если кнопка не умещается, скрываем её
      		} else {
      			// иначе отображаем
      			$('#top-link').removeClass('veryhidden');
      			$('#top-link').css({'padding-right': h+'px'});
      		}
      	}
      	mytoplink(); // вызываем функцию проверки при загрузке страницы
      	$(window).resize(function(){
      	// вызываем функцию проверки при изменении размеров окна браузера
      		mytoplink();
      	});

      2. А чтобы прописать ширину 100 пикселей, нужно изменить эти стили:

      #top-link{
      	padding-left:5px;
      }

      можно использовать и width:100px;

  • Алекс17 октября 2012 в 20:10 #

    Автору огромное спасибо, все здорово. Но вот на joomla возникла проблема с конфликтом jquery и mootools - просто вырубился один из модулей. На mootools достойной замены не нашел. У кого похожая проблема решение тут http://pcvector.net/useful/280-mootools-i-jquery-vmeste-noconflict-.html

  • Pupkin17 октября 2012 в 22:10 #

    не работает на вордпресс

  • Сергей18 октября 2012 в 20:10 #

    А как все таки передвинуть ссылку в верхний левый угол? 

  • yura29 октября 2012 в 18:10 #

     привет. подскажите - что нужно подаписывать в коде, чтобы кнопочка работала как на www.kinopoisk.ru там очень классно сделано. никак не допетраю как сделать и такое здесь!!!!!!!

  • yura29 октября 2012 в 19:10 #

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

    • Миша29 октября 2012 в 19:10 #

      прост нужно добавить блок в котором будет слово наверх, сначала пускай у него будут стили display:none, а при наведении на общий блок, менять стиль на display:block, например:

      #top-link:hover #new_block{
      	display:block;
      }

      можно забацать эффектов на jQuery, но это посложнее будет, например: 

      $('#top-link').mouseenter(function(){
      	$('#new_block').fadeIn();
      }).mouseleave(function(){
      	$('#new_block').fadeOut();
      });

      также в этом варианте можно будет убрать из кода плагин плавной прокрутки страницы

      • yura29 октября 2012 в 19:10 #

         сейчас попробую. спасибо за быстрый ответ!!!!!!нет плавная прокрутка пусть будет. нужно только чтобы кнопка наверх вела себя подобно кинопоисовской. чтобы и появлялась так и исчезала и вот эти фоны появлялись... п.с. а как вам мой сайтик???

      • Миша29 октября 2012 в 20:10 #

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

    • Миша29 октября 2012 в 19:10 #

      ну и не забывать менять фон на серый при наведении, тоже реализуемо на чистом css, при желании - jQuery

  • yura29 октября 2012 в 20:10 #

    Все - получилось. правда я немного своего дописал. сейчвс доделаю - могу дать вам мой код. спасибо

  • yura29 октября 2012 в 21:10 #

     ну вот. все сделано. можете смотреть. smotronik.16mb.com

  • yura29 октября 2012 в 21:10 #

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

  • yura29 октября 2012 в 21:10 #

     если хочешь, можем сайты с тобой залинковать!если бы еще кто-то у меня киношки постил! было бы вообще супер!

  • yura29 октября 2012 в 21:10 #

     и вообще добавляйся ко мне в други vk.com/id187509105 будем общаться. я тоже веб штуками занимаюсь.. но у меня яваскр. хромает и пхп, но если что-то нужно горы сверну, но разберусь!!!!!!!!

  • Ирина25 ноября 2012 в 00:11 #

    Спасибо за пост!

  • Дисел24 декабря 2012 в 08:12 #

    Думаю, что надо будет попробовать сделать на своем...

  • Viktor15 января 2013 в 03:01 #
    //В итоге получим "▲ Наверх"
    <div id="top-link">
    	<a href="#top">&#9650; Наверх</a>
    </div>
    jQuery.extend(jQuery.fn, {
    	toplinkwidth: function(){
    		var totalContentWidth = jQuery('#container').width(); //.outerWidth поменял на .width 
    		var totalTopLinkWidth = jQuery(this).children('a').outerWidth(true) + 150; // ширину пришлось поправить так как залазит на контент изза текста в сылке
    		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
    		if(h<0){
    			// если кнопка не умещается, скрываем её
    			jQuery(this).hide();
    		} else {
    			if(jQuery(window).scrollTop() >= 1){
    				jQuery(this).show();
    			}
    			jQuery(this).css({'padding-right': h+'px'});
    		}
    	}
    });
     
    jQuery(function($){
    	var topLink = $('#top-link');
    	topLink.css({'padding-bottom': $(window).height()});
    	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
    	topLink.toplinkwidth();
    	$(window).resize(function(){
    		topLink.toplinkwidth();
    	});
    	$(window).scroll(function() {
    		if($(window).scrollTop() >= 1) {
    			topLink.fadeIn(0);
    		} else {
    			topLink.fadeOut(200);
    		}
    	});
    	topLink.click(function(e) {
    		$("body,html").animate({scrollTop: 0}, 500);
    		return false;
    	});
    });

    Установил прозрачность, и серенький фон...

    #top-link{
    	cursor:pointer;
    	display:none;
    	position:fixed;
    	left:0px;
    	top:0px;
    	padding:0;
    	height:100%;
    }
    #top-link a{
    height:100%;
    	display:block;
    	font-size:2em;
    	text-decoration:none;
    }
    #top-link:hover{
    	background:#E1E7ED;

    З.ы. спасибо большое за урок!
    Выложил свое, делал на opencart

  • Viktor15 января 2013 в 03:01 #

    К верхнему посту

    #top-link:hover{
    	background:#E1E7ED;
    	/* IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     
      /* IE 5-7 */
      filter: alpha(opacity=50);
     
      /* Netscape */
      -moz-opacity: 0.5;
     
      /* Safari 1.x */
      -khtml-opacity: 0.5;
     
      /* Good browsers */
      opacity: 0.5;
    }
  • Алексей15 января 2013 в 12:01 #

    Подскажите, пожалуйста новичку как сделать, чтобы все это работало (какие файлы куда вставлять, куда что прописывать), очень хочу на своем сайте иак же сделать, очень понравилось!

    • Миша15 января 2013 в 14:01 #

      так ведь в статье подробно написано :)

      • Алексей15 января 2013 в 15:01 #

        НУ, как вам, профессионалам - понятно, а я еще ни разу не делал так! Прошу помогите (пошагово что куда запихивать)!!!

  • Василий6 февраля 2013 в 11:02 #

    Идея такая
    Зачем при каждом изменении размера, перещитывать вот эти переменные?

    var totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
    var totalTopLinkWidth = jQuery(this).children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin

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

  • Jaqen6 февраля 2013 в 13:02 #

    Вот скажите нахрена паддинг делать. что за адок.

  • Василий7 февраля 2013 в 15:02 #

    Вот код скрипта немножко оптимизированного

    jQuery.extend(jQuery.fn, {
    	toplinkwidth: function(){
    		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
    		if(h<0){
    			// если кнопка не умещается, скрываем её
    			topLinkData.hide();
    			h = jQuery(window).width()/2-totalContentWidth/2;
    			jQuery(this).css({'padding-right': h+'px'});
    		} else {
    			topLinkData.show();
    			jQuery(this).css({'padding-right': h+'px'});
    		}
    	}
    });
     
    jQuery(function($){
    	var topLink = $('#top-link');
    	topLinkData = $('#top-link-data');
    	totalContentWidth = jQuery('div#page').outerWidth(); //1040px(ширина блока с контентом, включая padding)
    	totalTopLinkWidth = topLinkData.outerWidth(true); //50px + 150px(ширина самой кнопки наверх, включая padding и margin)
    	topLink.css({'padding-bottom': $(window).height()});
    	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
    	topLink.toplinkwidth();
    	$(window).resize(function(){
    		topLink.toplinkwidth();
    	});
    	$(window).scroll(function() {
    		if($(window).scrollTop() >= 1) {
    			topLink.fadeIn(0);
    		} else {
    			topLink.fadeOut(200);
    		}
    	});
     
    	topLink.click(function(e) {
    		$("body,html").animate({scrollTop: 0}, 500);
    		return false;
    	});
    });

    Вот то что в шаблон вставлено

    <!--В итоге получим "^ Наверх"-->
    <div id="top-link">
    	<div id="top-link-data" href="#top">
    		<div class="triangle"></div><span>Наверх</span>
    	</div>
    </div>

    Вот классы

    #top-link{
    	cursor:pointer;
    	display:none;
    	position:fixed;
    	left:0px;
    	top:0px;
    	padding:0;
    }
    	#top-link-data{
    		width:100px;
    		margin:50px 0 0 10px;
    	}
    		.triangle {
    			position: absolute;
    			border-left: 10px solid transparent;
    			border-right: 10px solid transparent;
    			border-bottom: 10px solid #858585;
    			margin-top:1px;
    		}
    		#top-link-data span{
    			display:inline-block;
    			padding-left:25px;
    		}
    #top-link:hover{
    	background:#F1F1F1;
    	opacity:1.0; /* цвет фона */
    }
    • Миша7 февраля 2013 в 21:02 #

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

  • Cheerful8 февраля 2013 в 21:02 #

    Все круто, только у меня почему-то вылазит за границы - http://www.bemeto.ru
    Как поправить? Я думаю дело в моей верстке, но там свои сложности. Как поправить под мой случай код? Помогите пожалуйста.

    • Миша8 февраля 2013 в 22:02 #

      советую попробовать в HTML изменить эту часть кода следующим образом:

      3
      4
      5
      
      <div id="top-link">
      	<a href="#top" id="top-link-data">наверх</a>
      </div>
  • Nikadim18 февраля 2013 в 09:02 #

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

  • Evgeniy20 февраля 2013 в 16:02 #

    Спасибо за статью! Реализовал себе на сайт только поменял в стилях цвет, кнопку и позицию справа, не нарадуюсь) Вот кому интересно mobile.lg.ua

  • Роман18 марта 2013 в 19:03 #

    Заебися)

  • руслан26 марта 2013 в 14:03 #

    Добрый день. следуя вашему уроку сделал кнопку. вот код.

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

    вот на моем сайте можете глянуть korotron96.ru

    • Миша26 марта 2013 в 15:03 #

      для начала рекомендую поменять это

      #top-link {
      	cursor: pointer;
      	display: none;
      	position: fixed;
      	left: 0px;
      	bottom: 0px;
      	padding-left: 1200px;
      	padding-bottom: 50px;
      	z-index: 1;
      }

      на это:

      #top-link {
      	cursor: pointer;
      	display: none;
      	position: fixed;
      	right: 0px;
      	bottom: 0px;
      	padding-bottom: 50px;
      	z-index: 1;
      }
  • руслан26 марта 2013 в 15:03 #

    скорее всего не там пишу чтото))))как её сделать справа? а то что вы порекомендовали помогло)

    • Миша26 марта 2013 в 17:03 #

      тут в комментах уже у кого-то был такой вопрос) погляди там чуть выше))

      • руслан26 марта 2013 в 19:03 #

        разобрался спасибо. теперь другой вопрос. не могу понять как сделать фон от кнопки до верха как в контакте)

        • Миша26 марта 2013 в 19:03 #

          как-то так:

          #top-link{
          	background: #f0f0f0; /* например серый */
          }
          • руслан26 марта 2013 в 19:03 #

            не работает(

            • Миша26 марта 2013 в 19:03 #

              ну ты припиши к уже существующим стилям
              я вот сейчас зашел на сайт и прям через google chrome дописал - всё норм)

              • руслан26 марта 2013 в 19:03 #

                чот я тупой какой то видать((((( и как ты изменить мог если там пхп)

                • Миша27 марта 2013 в 06:03 #

                  да в гуглохром заходишь, щелкаешь по кнопке правой кнопкой мыши и выбираешь «Проосмотр кода элемента»
                  там и менять, но эт тольк после обновления страницы все исчезнет)

  • руслан26 марта 2013 в 19:03 #

    извеняюсь за доставучесть)

  • Аскар9 апреля 2013 в 20:04 #

    Здравствуй Миша! В общем вопрос вот в чем, как сделать чтобы при наведении, полоса прокрутки появлялась плавно?

    • Миша9 апреля 2013 в 22:04 #

      Привет)
      добавить ей примерно следующие css:

      -webkit-transition: all 0.5s ease;  /* Chrome 1-25, Safari 3.2+ */
           -moz-transition: all 0.5s ease;  /* Firefox 4-15 */
             -o-transition: all 0.5s ease;  /* Opera 10.50–12.00 */
                transition: all 0.5s ease;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
  • Unknown10 мая 2013 в 13:05 #

    Замените
    var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
    на
    $('.content-container').offset().left

  • Никита11 мая 2013 в 16:05 #

    Здравствуйте, а как сделать, чтобы она по повторному клику возвращалась обратно? спасибо заранее

  • Daniel27 мая 2013 в 00:05 #

    Привет!! Я хотел бы спросить, подходит ли этот код для сайтов на юкоз. Я пробоавл его разместить но он не работал. Другие ставил- работали, но этот в миллион раз круче тех. ОЧень хочеться этот поставить, скажите как пожалуйста!)

    • Миша27 мая 2013 в 07:05 #

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

  • Иван5 июня 2013 в 15:06 #

    Спасибо...Кнопка встала нормально...вот только "ПРОМО" лагает, подскажете что нить??? http://vsodet.ru/#top

    • Миша6 июня 2013 в 12:06 #

      не нашел проблемы)

      • Дмитри8 июня 2013 в 17:06 #

        Михаил – спасибо за доступный скрипт, пожалуй лучшее что есть в сети.

        Хочу задать вопрос: – Как выставить функцию появление кнопки после определенного количества прокрутки страницы? Возможно ли такое вообще в подобном скрипте организовать?

        Ситуация следующая: У меня сайт резинка, с лево блоки, с право блоки, сейчас при прокрутки у меня кнопка закрывает мою навигацию с лево что вообщем то не очень-то, хотелось бы чтоб кнопка начала появляться и пропадать когда это необходимо мне, то есть прокрутил предположим на 1000px в низу и только после этого она появляется и никак не раньше, прокрутил обратно на 1000 исчезает (*удобная былаб штука если на сайте присутствуют много длинных таблиц как у меня).

        • Миша9 июня 2013 в 08:06 #

          Привет!
          да, можно конечно, в последнем листинге кода 10я строчка, нужно заменить 1 на нужное количество пикселей:

          10
          
          			if(jQuery(window).scrollTop() >= 1){

          например на 1000:

          10
          
          			if(jQuery(window).scrollTop() >= 1000){
  • Анастасия8 июля 2013 в 11:07 #

    Не работает на мобильных устройствах((

    • Миша8 июля 2013 в 14:07 #

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

  • Анастасия8 июля 2013 в 14:07 #

    просто смутил пункт "поддержка мобильных устройств".

    • Миша9 июля 2013 в 09:07 #

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

      • Анастасия9 июля 2013 в 09:07 #

        Вот я и ломаю голову над этим. Не злись, я же ничего плохого в виду не имею. Просто думала что реализовано в мобильной версии

        • Миша9 июля 2013 в 14:07 #

          не злюсь, всё ок, действительно, для мобильных устройств не помешает сделать некоторые доработки)

          • Анастасия9 июля 2013 в 14:07 #

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

  • Андрей11 августа 2013 в 13:08 #

    Привет!
    Невероятно полезный скрипт!
    Скажи, пожалуйста, а как сделать так, чтобы на первых x и последних y пикселей область не показывалась (чтобы не закрывала footer и header)?

    Если уже обсуждалось, то перенаправь меня, пожалуйста, к обсуждению, а то я читал, но не нашел.

    Заранее спасибо!

    • Миша11 августа 2013 в 15:08 #

      Привет! Спасибо
      может тогда для футера и хедера увеличить z-index?

      • Андрей11 августа 2013 в 16:08 #

        Правильно ли я понимаю, что z-index обозначает высоту слоя, да?
        Это решение, спасибо! :)

        • Миша11 августа 2013 в 16:08 #

          да, только возможно еще придется дописать этим блокам position:relative, т.к. z-index работает не всегда.
          пожалуйста)

      • Андрей11 августа 2013 в 17:08 #

        К сожалению выяснилось, что эти блоки неверно выделены, и сделать наложение не получается. Я пока написал формулу, которая считает высоту блока в каждый момент

        $(window).scroll(function() {
                var footer = jQuery('#footer-copy').outerHeight() + jQuery('footer').outerHeight();
                var scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
                if(scrollBottom >= footer) {
                    topLink.css({'padding-bottom': $(document).height() - footer - $(window).scrollTop() + 10});
                } else {
                    topLink.css({'padding-bottom': $(window).height()});
        		if($(window).scrollTop() >= 500 )  {
        			topLink.fadeIn(300);
        		} else {
        			topLink.fadeOut(300);
        		}
        	}
        });

        Это не работает, как я понимаю, потому что topLink.css загружается единовременно, а не делается динамически. Вот как сделать это через js динамически?

        Заранее спасибо!!

        • Миша13 августа 2013 в 11:08 #

          во-первых, почему в некоторых местах: jQuery('footer'), а в некоторых $(window). из-за таких штуковин обычно весь jquery на сайте летит.

  • Дмитрий12 августа 2013 в 15:08 #

    Спасибо за мод. очень пригодился.

  • Роман13 августа 2013 в 14:08 #

    Ура! Я почти ничего не понимаю в jQuery, но строго следовал Вашим инструкциям и у меня всё заработало =) Могу даже привести доказательства, вот на этом сайте
    http://freewarelinks.ru/
    Огромное спасибо автору!

  • Роман13 августа 2013 в 14:08 #

    Еще раз спасибо огромное Михаил!

  • Александр14 октября 2013 в 14:10 #

    Михаил, спасибо за решение! Но появилась проблемка, прошу помочь.

    Установил на сайте androidis.ru, если браузер пользователя как раз под ширину сайта (1024х768 как раз, по моему), то стоит прокрутить в любой новости вниз и навести в левую часть, как кнопка прокрутки закрывает часть новости, а мне хотелось бы что бы на подобных экранах она вообще не отображалась.
    Тоже самое если юзер заходит на сайте с мобильного устройства (не на мобильную версию).
    Можно ли как-то это исправить?

    • Миша15 октября 2013 в 18:10 #

      странно, раньше с этим проблем не было, сегодня-завтра постарюсь исправить и обновить пост

    • Миша16 октября 2013 в 12:10 #

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

  • Дмитрий20 октября 2013 в 00:10 #

    Под Joomla 2.5 пойдет?

  • артем3 ноября 2013 в 21:11 #

    Попытался установить данную фичу, все ок, но теперь часть контента закрывается кнопкой Наверх, потому что у меня находится внутри основного div'a.
    В файле баттон.джс я заменил var totalContentWidth = jQuery('#content') на var totalContentWidth = jQuery('#moi_div'), но проблема пропадает ТОЛЬКО в том случае, если увеличить/уменьшить страницу и вернуть 100% масштаба - тогда кнопка Наверх прижимается к краю #moi_div'a, однако, если обновить или открыть другую страницу - проблема восстанавливается - кнопка Наверх снова перекрывает часть сайта.
    Что делать? :)

    • Миша5 ноября 2013 в 16:11 #

      можно взглянуть?)

    • Владимир10 января 2014 в 22:01 #

      Такая же проблема, уже неделю с это шириной борюсь, всеравно залазит на контекст...

      • Миша11 января 2014 в 06:01 #

        Попробуйте воспользоваться кодом из Демо. Если не получится и тогда, пишите, я вам помогу.

        • Владимир11 января 2014 в 21:01 #

          В целом все получилось, но с использованием варианта предложенным в коментариях, как в демо у меня никак не выходит)
          Ставил на OpenCart и вот эта строчка ложала остальные модули:

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

          удалив ее все стало окей!
          Спасибо вам за отличный скрипт, эта кнопка очень удобна!)
          Выложу вариант, который мне подошел, может кому-нибудь на OpenCart понадобится!

          HTML:

          	<!-- скрипты -->
          	<script src="catalog/view/theme/sportstore/js/button.js"></script>
          	<!--  HTML кнопки наверх -->
          <div id="top-link">
          	<div id="top-link-data" href="#top">
          		<div class="triangle"></div><span>Наверх</span>
          	</div>
          </div>

          CSS:

          #top-link{
          	cursor:pointer;
          	display:none;
          	position:fixed;
          	left:0px;
          	top:0px;
          	padding:0;
          }
          	#top-link-data{
          		width:100px;
          		margin:50px 0 0 10px;
          	}
          		.triangle {
          			position: absolute;
          			border-left: 10px solid transparent;
          			border-right: 10px solid transparent;
          			border-bottom: 10px solid #858585;
          			margin-top:1px;
          		}
          		#top-link-data span{
          			display:inline-block;
          			padding-left:25px;
          		}
          #top-link:hover{
          	background:#F1F1F1;
          	opacity:0.5; /* цвет фона */
          }

          button.js:

          jQuery.extend(jQuery.fn, {
          	toplinkwidth: function(){
          		var h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
          		if(h<0){
          			// если кнопка не умещается, скрываем её
          			topLinkData.hide();
          			h = jQuery(window).width()/2-totalContentWidth/2;
          			jQuery(this).css({'padding-right': h+'px'});
          		} else {
          			topLinkData.show();
          			jQuery(this).css({'padding-right': h+'px'});
          		}
          	}
          });
           
          jQuery(function($){
          	var topLink = $('#top-link');
          	topLinkData = $('#top-link-data');
          	totalContentWidth = jQuery('div#top').outerWidth(); //1040px(ширина блока с контентом, включая padding)
          	totalTopLinkWidth = topLinkData.outerWidth(true); //50px + 150px(ширина самой кнопки наверх, включая padding и margin)
          	topLink.css({'padding-bottom': $(window).height()});
          	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
          	topLink.toplinkwidth();
          	$(window).resize(function(){
          		topLink.toplinkwidth();
          	});
          	$(window).scroll(function() {
          		if($(window).scrollTop() >= 1) {
          			topLink.fadeIn(0);
          		} else {
          			topLink.fadeOut(200);
          		}
          	});
           
          	topLink.click(function(e) {
          		$("body,html").animate({scrollTop: 0}, 500);
          		return false;
          	});
          });
  • саша6 декабря 2013 в 15:12 #

    При уменьшении окна, кнопка начинает налазить на основной контент. В скрипте указал название своего div. Также не понятно, как устанавливать ширину полосы прокрутки, . Посмотрите matrazz.ru

  • Михаил24 января 2014 в 19:01 #

    Благодарю. Очень долго мучился, но все же получилось :) Единственное, не могу сделать так, чтобы при уменьшении размера окна до какого-то значения (допустим до 300px), вся полоса с кнопкой пропала или сделалась очень узкой. Помогите пожалуйста. Если что, вот сайт mvblog.ru

  • Алексей5 февраля 2014 в 01:02 #

    плагин картинок Fancybox for WordPress на Вордпресс вместе с кнопкой "наверх" не хочет работать, не подскажете в чем может быть проблема?

  • ДЖО20 февраля 2014 в 21:02 #

    Привет, всё устанавливается с первого раза, просто и легко, даже для не опытных) высокое спасибо за отличную идею.
    Вот только не могу полноценно реализовать её.
    Визуализация кнопки ведёт себя не нормально, в начале не появляется, потом мелькает, но стоит подождать некоторое время визуально всё появляется. Сам функционал работает отлично.
    Может ли это связано как то с подгружаемым jquery? так как на нём есть работающий слайдер, если его отключить тогда кнопку видно.
    Как быть если подгружаются два разных выпуска jquery? если дело в них конечно.

    • Миша23 февраля 2014 в 12:02 #

      Как быть если подгружаются два разных выпуска jquery?

      Привет! так быть не должно ни в коем случае.

  • Alejandro28 февраля 2014 в 09:02 #

    Спасибо, самая хорошая реализация, из всех, что я встречал. Установил к себе на http://sanek.co

  • Ваня19 октября 2014 в 13:10 #

    как сделать,чтобы кнопка "Наверх" срабатывала немного позже?

  • Саня8 ноября 2014 в 14:11 #

    А реально сделать так чтоб кнопка наверх была не слева-справа, а внизу странички. Скажем, слоем высотой в пикселей 40. Хочу эту функцию под смартфоны использовать.

  • Саня8 ноября 2014 в 20:11 #

    А можете написать как? Да, на всю ширину.

  • Антон23 января 2015 в 00:01 #

    Всем привет! Помогите пожалуйста, как изменить масштаб сайта на 90%, при 90% сайт выглядит более интересно!!!
    Вроде в wp всё перепробовал, ничего не получилось!

    • Миша23 января 2015 в 09:01 #

      Привет! CSS надо переделывать :)

      • Антон23 января 2015 в 10:01 #

        Привет) я в css менял параметры body

        body{
        max-width:90%;
        параметры отступов;
        }

        , но у меня только смещение сайта происходило, также и в пикселях указывал ширину.
        Лазал по стилю и экспериментально в контейнере код меня и дописывал.
        Нужного результата не получил.
        Можешь помочь?

        • Миша24 января 2015 в 12:01 #

          Привет) для твоего случая подойдут только пиксели.

          • Антон24 января 2015 в 23:01 #

            Привет! Спасибо, я уже разобрался с этой проблемой))
            использовал вот такую штуку:

            -webkit-transform: scale(0.9);/* для Chrome и Safari
            -moz-transform: scale(0.9); /* Для Firefox */
            -ms-transform: scale(0.9); /* Для IE */
            -o-transform: scale(0.9); /* Для Opera */

            Но возник другого рода трабл. После масштабирования элементы сайта стали дергаться, но это почему-то только на хроме. На остальных браузерах всё отлично! Интересно в чем причина???

            • Миша25 января 2015 в 00:01 #

              Решение реально очень простое и классное. Если честно, я не совсем уверен в его корректности, отсюда и косяк с хромом — это моё мнение.

              Если разберётесь, прошу поделиться инфой :)

  • Любовь27 января 2015 в 20:01 #

    Спасибо вам большое!

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

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...