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


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

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

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

#61 arver

arver

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

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

Отправлено 05 Декабрь 2012 - 18:25

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

#62 support 2.0

support 2.0

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

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

Отправлено 05 Декабрь 2012 - 18:44

Просмотр сообщенияarver (05 Декабрь 2012 - 18:25) писал:

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

Приложите в сообщении изображение, которое Вы хотели бы поставить на сайт вместо того изображения

#63 arver

arver

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

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

Отправлено 05 Декабрь 2012 - 18:59

http://files.storela...37421/arrow.jpg

#64 support 2.0

support 2.0

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

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

Отправлено 05 Декабрь 2012 - 19:40

Просмотр сообщенияarver (05 Декабрь 2012 - 18:59) писал:

http://files.storela...37421/arrow.jpg

Ваша кнопка сохранена с белым фоном. Установите в графическом редакторе прозрачный фон

#65 kaisyRUS

kaisyRUS

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

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

Отправлено 20 Декабрь 2012 - 09:11

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

#66 Koderhan

Koderhan

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

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

Отправлено 20 Декабрь 2012 - 10:08

Просмотр сообщенияkaisyRUS (20 Декабрь 2012 - 09:11) писал:

Вопрос подниму снова. Как сделать, чтоб моя кнопка была полупрозрачной, пока не наведёшь на неё. Сайт в подписи
Если вы хотите сделать кнопку "Наверх" сделать полупрозрачной.
То для этого можно изменить код в файле main.csstemplate.
Найти код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
}
Заменить:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
opacity: 0.3;/*уровень прозрачности*/
}
#back-top:hover {
	opacity: 1;/*при наведение мышкой уровенб прозрачности изменится на это*/
}

#67 Eugie89

Eugie89

    Продвинутый пользователь

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

Отправлено 18 Январь 2013 - 16:15

а моя кнопка, когда спускаешься вниз страницы появляется, а потом вдруг исчезает в подвале и снова появляется, когда поднимаешься вверх..
http://s017.radikal....4caba958a37.jpg
подскажите, что исправить или это так и должно быть?

#68 support 2.0

support 2.0

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

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

Отправлено 18 Январь 2013 - 16:53

Просмотр сообщенияEugie89 (18 Январь 2013 - 16:15) писал:

а моя кнопка, когда спускаешься вниз страницы появляется, а потом вдруг исчезает в подвале и снова появляется, когда поднимаешься вверх..
http://s017.radikal....4caba958a37.jpg
подскажите, что исправить или это так и должно быть?

Будьте добры, укажите в профиле номер Вашего магазина, номер аккаунта или адрес, чтобы мы смогли посмотреть в чем может быть причина такого отображения

#69 Eugie89

Eugie89

    Продвинутый пользователь

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

Отправлено 18 Январь 2013 - 20:20

Просмотр сообщенияsupport 2.0 (18 Январь 2013 - 16:53) писал:

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

#70 Vaccina

Vaccina

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

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

Отправлено 19 Январь 2013 - 01:36

Попробуйте в файле стилей main.css найти

#back-top {
	bottom: 30px;
	margin-left: -150px;
	position: fixed;
	right: 30px;
}

и заменить на

#back-top {
	bottom: 30px;
	margin-left: -150px;
	position: fixed;
	right: 30px;
	z-index: 2;
}

#71 Eugie89

Eugie89

    Продвинутый пользователь

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

Отправлено 19 Январь 2013 - 11:04

Просмотр сообщенияVaccina (19 Январь 2013 - 01:36) писал:

Попробуйте в файле стилей main.css найти


и заменить на



да. получилось. спасибо.

#72 livem1.

livem1.

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

  • Пользователи
  • PipPipPipPip
  • 441 сообщений
  • ГородКиев

Отправлено 20 Январь 2013 - 10:55

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

[SL-146761]

Спасибо

#73 miyako

miyako

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

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

Отправлено 20 Январь 2013 - 15:17

Просмотр сообщенияlivem1. (20 Январь 2013 - 10:55) писал:

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

[SL-146761]

Спасибо

Пришлите пожалуйста скрипт этой кнопки, то есть примерно такой код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
		 $(window).scroll(function () {
				 if ($(this).scrollTop() > 100) {
						 $('#back-top').fadeIn();
				 } else {
						 $('#back-top').fadeOut();
				 }
		 });
		 // scroll body to 0px on click
		 $('#back-top a').click(function () {
				 $('body,html').animate({
						 scrollTop: 0
				 }, 800);
				 return false;
		 });
});
});
</script>

#74 livem1.

livem1.

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

  • Пользователи
  • PipPipPipPip
  • 441 сообщений
  • ГородКиев

Отправлено 25 Январь 2013 - 11:53

#back-top {
  position: fixed;
bottom: 15px;
margin-right: -150px;
   left: 290px;
opacity: 0.3;/*уровень прозрачности*/
}
#back-top:hover {
        opacity: 1;/*при наведение мышкой уровенб прозрачности изменится на это*/
}
#back-top a {
width: 55px;
display: block;
text-align: center;
font: 10px/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: 55px;
height: 55px;
display: block;
margin-bottom: 7px;
background: url(http://born2shopping...761/r4.png?8222) 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;
}

#75 livem1.

livem1.

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

  • Пользователи
  • PipPipPipPip
  • 441 сообщений
  • ГородКиев

Отправлено 25 Январь 2013 - 13:31

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

#76 Vaccina

Vaccina

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

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

Отправлено 26 Январь 2013 - 03:10

Вы можете попробовать увеличить расстояние в строке

$(this).scrollTop() > 400

данная строка находиться в вашем шаблоне "HTML". 400рх это значение при котором будет появляться кнопка.

#77 livem1.

livem1.

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

  • Пользователи
  • PipPipPipPip
  • 441 сообщений
  • ГородКиев

Отправлено 26 Январь 2013 - 10:52

Спасибо большое, уже все сделал.

#78 optomizkitaya

optomizkitaya

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 119 сообщений
  • ГородSpb

Отправлено 28 Январь 2013 - 15:11

Просмотр сообщения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>

сделал все как написали, кнопка не появилась, сайт

#79 Koderhan

Koderhan

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

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

Отправлено 28 Январь 2013 - 16:54

Попробуйте воспользоваться этими стилями для кнопки прокрутки.
В файле "main.csstemplate".
Найти код:
#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;
		}
Заменить:
/* Кнопка прокрутки */
#back-top {
		position: fixed;
		bottom: 30px;
		margin-left: 75px;
		}
#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: 70px;
		display: block;
		margin-bottom: 7px;
		background: #DDD url(http://fishkinatachku.ru/web/upload/assets/images/125/124268/arrow_up.png) no-repeat center 4px;
		-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;
		}
		/* Кнопка прокрутки конец*/

#80 optomizkitaya

optomizkitaya

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 119 сообщений
  • ГородSpb

Отправлено 28 Январь 2013 - 17:44

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


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

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

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