Перейти к публикации

Рекомендованные сообщения

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

Ссылка на сообщение
Поделиться на других сайтах

У Вас на сайте так и сделано

Ссылка на сообщение
Поделиться на других сайтах
  • 3 месяца спустя...

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


1. В файле main.tpl, перед тегом

</head>

вставляем следующий код:

<script type="text/javascript">




	  (function(jq) {


		 jq.autoScroll = function(ops) {


		 ops = ops || {};


		 ops.styleClass = ops.styleClass || 'scroll-to-top-button';


		 var t = jq('<div class="'+ops.styleClass+'"></div>'),


			d = jq(ops.target || document);


		 jq(ops.container || 'body').append(t);




		 t.css({


			opacity: 0,


			position: 'absolute',


			top: 0,


			right: 0


		 }).click(function() {


			jq('html,body').animate({


			   scrollTop: 0


			}, ops.scrollDuration || 1000);


		 });




		 $(window).scroll(function(){


			var sv = d.scrollTop();


			if (sv < 10) {


			   t.clearQueue().fadeOut(ops.hideDuration || 200);


			   return;


			}




			t.css('display', '').clearQueue().animate({


			   top: sv,


			   opacity: 0.8


			}, ops.showDuration || 500);


		 });


	  };


   })(jQuery);




   $(document).ready(function(){


	  $.autoScroll({


		 scrollDuration: 2000,


		 showDuration: 600,


		 hideDuration: 300


	  });


   });




</script>



2. В файле стилей дописываем следующий css код:

/*Кнопка наверх*/

.scroll-to-top-button{ background: #666 url("../images/ups.png") center center no-repeat;

	width: 32px;

	height: 32px;

	color: #fff; font-family: verdana;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	-o-border-radius: 5px;

	cursor: pointer;

	padding: 15px;

	margin: 20px;

}



3. Скачиваем картинку и заливаем на сервер в templates/имя шаблона/images

Ссылка на сообщение
Поделиться на других сайтах

Поменяйте position с absolute на relative, вставьте код в нужном месте страницы, а потом уже ковыряйте стиль для тонкой настройки.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...