Перейти к содержимому


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

Автор velena168, 09 сент. 2012 12:41

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 257

#121 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 13 Май 2013 - 18:40

Просмотр сообщенияsupport 2.0 (13 Май 2013 - 16:32) писал:

По поводу серого фона, найдите в main.css блок
#back-top a:hover span {
	 background-color: #777;
	 }
уберите
background-color: #777;

теперь найдите
#back-top span {
	 width: 108px;
	 height: 108px;
	 display: block;
	 margin-bottom: 7px;
	 background: #ddd url({ASSETS_IMAGES_PATH}vverx.png) no-repeat center center;
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 }
замените на
#back-top span {
	 width: 108px;
	 height: 108px;
	 display: block;
	 margin-bottom: 7px;
	 background: url({ASSETS_IMAGES_PATH}vverx.png) no-repeat center center;
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 }

Сделала. Серого фона больше нет, спасибо.
Теперь нужно сделать 2 вещи:
1) Убрать надпись "Вверх"
2) Эта кнопка не должна появляться в начале страницы,  а потом исчезать. Надо, чтобы она появлялась после прокрутки текста вниз.
Спасибо!

#122 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 14 Май 2013 - 02:24

Вам необходимо в вашем шаблоне "HTML" найти

<p id="back-top">
		<a href="#top"><span></span>Вверх</a>
</p>

и заменить на

<p id="back-top" style="display: none;">
		<a href="#top"><span></span></a>
</p>

#123 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 14 Май 2013 - 08:16

Просмотр сообщенияСake (14 Май 2013 - 02:24) писал:

Вам необходимо в вашем шаблоне "HTML" найти

<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>

и заменить на

<p id="back-top" style="display: none;">
	 <a href="#top"><span></span></a>
</p>

Супер, спасибо!

#124 Valli

Valli

    Пользователь

  • Пользователи
  • PipPip
  • 39 сообщений

Отправлено 27 Май 2013 - 14:17

подскажите по кнопке наверх, коды в css и html поставила, а вот когда в js вставляю у меня на сайте пишут На сайте есть одна ошибка JSПоказать

#125 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 27 Май 2013 - 14:29

Просмотр сообщенияValli (27 Май 2013 - 14:17) писал:

подскажите по кнопке наверх, коды в css и html поставила, а вот когда в js вставляю у меня на сайте пишут На сайте есть одна ошибка JSПоказать

Скажите пожалуйста ваш номер аккаунта. Какой инструкцией по установке вы пользовались?

#126 Valli

Valli

    Пользователь

  • Пользователи
  • PipPip
  • 39 сообщений

Отправлено 27 Май 2013 - 17:42

аккаунт SL-208713 инструкция http://jemand.ru/kno...-na-css-jquery/

#127 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 28 Май 2013 - 01:57

Попробуйте воспользоваться следующей инструкцией по установке http://forum.storela...ерх/#entry27024

#128 Valli

Valli

    Пользователь

  • Пользователи
  • PipPip
  • 39 сообщений

Отправлено 05 Июнь 2013 - 20:41

Добрый вечер! Подскажите, как сделать чтоб при наведении кнопки "наверх" она меняла цвет. Аккаунт SL-208713. Спасибо.

#129 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 06 Июнь 2013 - 01:04

Сайт - редактор тем - main.css - найдите:
#back-top a:hover span {
}
в нем пропишите background с необходимым значением

#130 Valli

Valli

    Пользователь

  • Пользователи
  • PipPip
  • 39 сообщений

Отправлено 06 Июнь 2013 - 17:35

прописала, но цвет не меняется!

#131 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 06 Июнь 2013 - 18:31

у вас кнопка наверх это картинка
вот по ссылке можно увидеть
http://design.urtaob..._up.png
что бы при наведении менялся цвет надо в графическом редакторе изменить цвет одного из кругов на тот который вы хотите видеть.

#132 new-tecs

new-tecs

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 14 Июль 2013 - 09:58

Ещё раз распишите пошагово, как поставить кнопку НАВЕРХ на сайте. А то тут всё так сложно и непонятно написано)))
Спасибо.

#133 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 14 Июль 2013 - 14:04

Просмотр сообщенияnew-tecs (14 Июль 2013 - 09:58) писал:

Ещё раз распишите пошагово, как поставить кнопку НАВЕРХ на сайте. А то тут всё так сложно и непонятно написано)))
Спасибо.

Вам ответили здесь - http://forum.storela...иск/#entry35229

#134 ilyabiz

ilyabiz

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 19 Июль 2013 - 11:49

Просмотр сообщенияVaccina (12 Сентябрь 2012 - 08:48) писал:

Не совсем конечно понимаю куда еще подробнее описать действия.
Необходимо в файл main.css вставить

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
	}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover {
	color: #000;
	}
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover span {
	background-color: #777;
	}

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

url(up-arrow.png)

Далее в самый конец main.js добавим

$(document).ready(function(){
		$("#back-top").hide();
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 250) {
					$('#back-top').fadeIn();
				} else {
					$('#back-top').fadeOut();
				}
			});
			$('#back-top a').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
	});

После в шаблоне "HTML" сразу после <body> вставить

<p id="back-top">
	<a href="#top"><span></span>Вверх</a>
</p>
Сделал всё в точности как написано, но ничего не появилось, может я указал неверный адрес? У меня получился такой (http://design.mirtec...r_nowm.png?3221). Помогите пожалуйста.

#135 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 19 Июль 2013 - 18:18

Просмотр сообщенияilyabiz (19 Июль 2013 - 11:49) писал:

Сделал всё в точности как написано, но ничего не появилось, может я указал неверный адрес? У меня получился такой (http://design.mirtec...r_nowm.png?3221). Помогите пожалуйста.

здравствуйте, первое что заметила: найдите в файле main.css блок
.paymentFormTbodySubmitButton:hover {
background: #1f8cf1;
background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");
border: 1px solid #1560a6;
border-top: 1px solid #1560a6;
border-bottom: 1px solid #1560a6;
-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
text-shadow:0px -1px 1px 0 #5c3c01;
-o-transition: none 0.3s ease-in-out;
-webkit-transition: none 0.3s ease-in-out;
-moz-transition: none 0.3s ease-in-out;
border-image: initial;
замените на
.paymentFormTbodySubmitButton:hover {
background: #1f8cf1;
background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");
border: 1px solid #1560a6;
border-top: 1px solid #1560a6;
border-bottom: 1px solid #1560a6;
-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
text-shadow:0px -1px 1px 0 #5c3c01;
-o-transition: none 0.3s ease-in-out;
-webkit-transition: none 0.3s ease-in-out;
-moz-transition: none 0.3s ease-in-out;
border-image: initial;
}

вроде остальное у Вас верно, не могу понять почему не отображается

#136 ilyabiz

ilyabiz

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 19 Июль 2013 - 19:10

Просмотр сообщенияsupport 2.0 (19 Июль 2013 - 18:18) писал:

здравствуйте, первое что заметила: найдите в файле main.css блок
.paymentFormTbodySubmitButton:hover {
background: #1f8cf1;
background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");
border: 1px solid #1560a6;
border-top: 1px solid #1560a6;
border-bottom: 1px solid #1560a6;
-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
text-shadow:0px -1px 1px 0 #5c3c01;
-o-transition: none 0.3s ease-in-out;
-webkit-transition: none 0.3s ease-in-out;
-moz-transition: none 0.3s ease-in-out;
border-image: initial;
замените на
.paymentFormTbodySubmitButton:hover {
background: #1f8cf1;
background-image:-moz-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-webkit-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
background-image:-o-linear-gradient(top, #186cbb 0%, #1f8cf1 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#186cbb, endColorstr=#1f8cf1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#186cbb", endColorstr="#1f8cf1");
border: 1px solid #1560a6;
border-top: 1px solid #1560a6;
border-bottom: 1px solid #1560a6;
-webkit-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 0 0 #186cbb inset,0 1px 2px 0 rgba(0,0,0,0.2);
text-shadow:0px -1px 1px 0 #5c3c01;
-o-transition: none 0.3s ease-in-out;
-webkit-transition: none 0.3s ease-in-out;
-moz-transition: none 0.3s ease-in-out;
border-image: initial;
}

вроде остальное у Вас верно, не могу понять почему не отображается
Всё-равно не отображается, проверьте картинку и адрес у меня, может там что-то не так?

#137 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 19 Июль 2013 - 20:50

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:
 #back-top {
		position: fixed;
		bottom: 30px;
		margin-left: -150px;
		}
Заменить:
 #back-top {
		position: fixed;
		bottom: 30px;
		left: 85%;
}

@media screen and (max-width: 700px) {
	#back-top {
		display:none !important;
	}
}

#138 ilyabiz

ilyabiz

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 19 Июль 2013 - 21:26

Просмотр сообщенияKoderhan (19 Июль 2013 - 20:50) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
Заменить:
#back-top {
position: fixed;
bottom: 30px;
left: 85%;
}

@media screen and (max-width: 700px) {
#back-top {
display:none !important;
}
}
Спасибо, кнопка появилась, а как сделать, чтобы она появлялась только когда опускаешься ниже,стала прозрачной,а то сейчас сильно выделяется и чтобы при нажатии плавно вверх поднялся, буду благодарен.

#139 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Июль 2013 - 05:08

На данный момент она появляется в случае скролла вниз, до этого момента не наблюдается. Вы хотите ее сделать прозрачной, а при наведении яркой?
Для этого в main.css найдите:
#back-top span {
	background: url("http://design.mirtech5.ru/10_thumb.png?8038") no-repeat scroll center center #DDDDDD;
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 108px;
	margin-bottom: 7px;
	transition: all 1s ease 0s;
	width: 108px;
}
добавьте стиль opacity: 0.4;
Далее найдите:
#back-top a:hover span {
	background-color: #777777;
}
добавьте стиль opacity: 1;

#140 ilyabiz

ilyabiz

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 20 Июль 2013 - 13:15

Просмотр сообщенияVaccina (20 Июль 2013 - 05:08) писал:

На данный момент она появляется в случае скролла вниз, до этого момента не наблюдается. Вы хотите ее сделать прозрачной, а при наведении яркой?
Для этого в main.css найдите:
#back-top span {
	background: url("http://design.mirtech5.ru/10_thumb.png?8038") no-repeat scroll center center #DDDDDD;
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 108px;
	margin-bottom: 7px;
	transition: all 1s ease 0s;
	width: 108px;
}
добавьте стиль opacity: 0.4;
Далее найдите:
#back-top a:hover span {
	background-color: #777777;
}
добавьте стиль opacity: 1;
не совсем понимаю как эти стили добавить?
Обратно в Общие вопросы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy