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


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

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

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

#81 Koderhan

Koderhan

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

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

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

В файле "main.csstemplate".
Найти код:
#back-top {
				position: fixed;
				bottom: 30px;
				margin-left: 75px;
				}
Заменить:

#back-top {
				position: fixed;
				bottom: 30px;
				right: 50px;
}

#82 maxxb

maxxb

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

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

Отправлено 04 Февраль 2013 - 17:50

Просмотр сообщенияvelena168 (09 Сентябрь 2012 - 12:41) писал:

Заметила сегодня в админке новую кнопочку Наверх. Спасибо. Очень ее не хватало. А, как бы на сайте сделать такую кнопку? Можно подробный код и куда вставить? Именно такую?
Кнопочка Home на клавиатуре выполняет туже функцию, правда, возможно, не все пользователи об этом знают

#83 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 06 Февраль 2013 - 23:29

Здравствуйте!
1)У меня кнопка тоже активна наверху последовал советам - не меняется!
Что можно сделать?
2)И чтоб вверх плавно двигалась?
Спасибо!

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;
						});
				});
		});

main.css

#back-top {
		position: fixed;
		bottom: 30px;
		margin-left: -150px;
		right: 1190px;
		top: 555px;
	   
		}
#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: 60px;
		height: 60px;
		display: block;
		margin-bottom: 7px;
		background: #ddd url(http://nadonenado.storeland.ru/web/upload/assets/images/172/171968/arrow_up.png?5923) no-repeat center center;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		}
#back-top a:hover span {
		background-color: #777;
		}

HTML
<p id="back-top">
		<a href="#top"><span></span></a>
</p>

nadonenado.storeland.ru

#84 Koderhan

Koderhan

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

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

Отправлено 07 Февраль 2013 - 10:30

Просмотр сообщенияsotil (06 Февраль 2013 - 23:29) писал:

Здравствуйте!
1)У меня кнопка тоже активна наверху последовал советам - не меняется!
Что можно сделать?
2)И чтоб вверх плавно двигалась?
Спасибо!

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;
					 });
			 });
	 });

main.css

#back-top {
	 position: fixed;
	 bottom: 30px;
	 margin-left: -150px;
	 right: 1190px;
	 top: 555px;
	
	 }
#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: 60px;
	 height: 60px;
	 display: block;
	 margin-bottom: 7px;
	 background: #ddd url(http://nadonenado.storeland.ru/web/upload/assets/images/172/171968/arrow_up.png?5923) no-repeat center center;
	 -webkit-border-radius: 30px;
	 -moz-border-radius: 30px;
	 border-radius: 30px;
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 }
#back-top a:hover span {
	 background-color: #777;
	 }

HTML
<p id="back-top">
	 <a href="#top"><span></span></a>
</p>

nadonenado.storeland.ru
У вас ошибка в файле "main.js".
Попробуйте удалить html теги из этого файла.
Найти код:
<script type="text/javascript">
  $(document).ready(function(){
  $("#back-top").hide();
  $(function () {
   $(window).scroll(function () {
	if ($(this).scrollTop() > 50) {
	 $('#back-top').fadeIn();
	} else {
	 $('#back-top').fadeOut();
	}
   });
   $('#back-top a').click(function () {
	$('body,html').animate({
	 scrollTop: 0
	}, 800);
	return false;
   });
  });
});
</script>
И заменить:
  $(document).ready(function(){
  $("#back-top").hide();
  $(function () {
   $(window).scroll(function () {
	if ($(this).scrollTop() > 50) {
	 $('#back-top').fadeIn();
	} else {
	 $('#back-top').fadeOut();
	}
   });
   $('#back-top a').click(function () {
	$('body,html').animate({
	 scrollTop: 0
	}, 800);
	return false;
   });
  });
});

#85 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 07 Февраль 2013 - 14:31

Просмотр сообщенияKoderhan (07 Февраль 2013 - 10:30) писал:

У вас ошибка в файле "main.js".
Попробуйте удалить html теги из этого файла.
Найти код:
<script type="text/javascript">
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
	 $('#back-top').fadeIn();
} else {
	 $('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
	 scrollTop: 0
}, 800);
return false;
});
});
});
</script>
И заменить:
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
	 $('#back-top').fadeIn();
} else {
	 $('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
	 scrollTop: 0
}, 800);
return false;
});
});
});


<script type="text/javascript">
Эту строчку тоже заменить?

#86 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 07 Февраль 2013 - 14:38

Отлично, спасибо огромное!
Подскажите ещё: Можно ли добавлять к товару на страницу документы (инструкции, сертификаты и т. д.?

#87 support 2.0

support 2.0

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

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

Отправлено 07 Февраль 2013 - 16:21

Просмотр сообщенияsotil (07 Февраль 2013 - 14:38) писал:

Отлично, спасибо огромное!
Подскажите ещё: Можно ли добавлять к товару на страницу документы (инструкции, сертификаты и т. д.?

Если это будет в виде изображений, то конечно можете. Предварительно закачайте эти изображения через раздел Сайт -> Файлы -> и скопируйте ссылку на эти изображения. Далее в описании в нужном месте нажмите на кнопку добавления изображения и укажите ссылку его

#88 miniup

miniup

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

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

Отправлено 07 Февраль 2013 - 17:59

Все сделал как написано,но стрелка  не пропадает,когда на верх сайта поднимаешся. Она по идее на верху исчезать должна,а в низу появляться ? Правильно? сайт
Здесь  стоит > 250


Скрытый текст

#89 Koderhan

Koderhan

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

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

Отправлено 07 Февраль 2013 - 19:02

Просмотр сообщенияminiup (07 Февраль 2013 - 17:59) писал:

Все сделал как написано,но стрелка  не пропадает,когда на верх сайта поднимаешся. Она по идее на верху исчезать должна,а в низу появляться ? Правильно? сайт
Здесь  стоит > 250


Скрытый текст
В файле "main.csstemplate".
Найти код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
opacity: 0.09;/*уровень прозрачности*/
}
Заменить:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
opacity: 0.04;/*уровень прозрачности*/
}

#90 miniup

miniup

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

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

Отправлено 07 Февраль 2013 - 21:12

Просмотр сообщенияKoderhan (07 Февраль 2013 - 19:02) писал:

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

#91 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 07 Февраль 2013 - 22:01

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

Если это будет в виде изображений, то конечно можете. Предварительно закачайте эти изображения через раздел Сайт -> Файлы -> и скопируйте ссылку на эти изображения. Далее в описании в нужном месте нажмите на кнопку добавления изображения и укажите ссылку его

Не понял , не получается?
А если многостраничный PDF или Word ?

#92 miniup

miniup

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

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

Отправлено 07 Февраль 2013 - 22:49

Просмотр сообщенияsotil (07 Февраль 2013 - 22:01) писал:

Не понял , не получается?
А если многостраничный PDF или Word ?
Скрин приложил.
Там видно как стрелка смотрится в самом верху страницы. Я думаю ее не должно быть видно в принципе (на верху) ,только на середине или ниже страницы.
Если знаете тему форума,дайте ссылку пожалуйста.


2. Как текст сделать во всю длину
3. Как слайдер шире сделать
4. Как сделать прозрачным весь этот блок

Прикрепленные изображения

  • Снимок.JPG

#93 Vaccina

Vaccina

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

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

Отправлено 08 Февраль 2013 - 00:34

Просмотр сообщенияminiup (07 Февраль 2013 - 21:12) писал:

opacity: 0.04;/*уровень прозрачности*/
менял я прозрачность,это не помогает. Стрелка остается вверху,а внизу ее плохо видно

Вероятно проблема связана с тем что у вас в шаблоне вставлено 2 таких кнопки.

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

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

Просмотр сообщенияsotil (07 Февраль 2013 - 22:01) писал:

Не понял , не получается?
А если многостраничный PDF или Word ?

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

Просмотр сообщенияminiup (07 Февраль 2013 - 22:49) писал:

Скрин приложил.
Там видно как стрелка смотрится в самом верху страницы. Я думаю ее не должно быть видно в принципе (на верху) ,только на середине или ниже страницы.
Если знаете тему форума,дайте ссылку пожалуйста.


2. Как текст сделать во всю длину
3. Как слайдер шире сделать
4. Как сделать прозрачным весь этот блок

2) Вам необходимо в файле стилей main.css найти

#content #mainindex .headline {
	background: url("/web/upload/assets/images/148/147421/headline-index-bg.jpg") no-repeat scroll center top transparent;
	width: 492px;
}

и заменить на

#content #mainindex .headline {
	background: url("/web/upload/assets/images/148/147421/headline-index-bg.jpg") no-repeat scroll center top transparent;
}

3) Вам необходимо изменить размер самих изображений вставленных в слайдер.

4) В файле стилей найдите

#panelsite {
	height: 104px;
	width: 100%;
}

и замените на

#panelsite {
	height: 104px;
	opacity: .9;
	width: 100%;
}

#94 miniup

miniup

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

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

Отправлено 08 Февраль 2013 - 11:40

Вероятно проблема связана с тем что у вас в шаблоне вставлено 2 таких кнопки.
Скрытый текст
Нет кнопка одна,вторую не нашел по крайней мере

2) Вам необходимо в файле стилей main.css найти
Скрытый текст

Не совсем то ,что хотел получилось.Первая строка обрывается на середине,вторая строка идет нормально,во всю длину.А надо бы что бы и первая строка шла полностью в длину страницы.

#95 miyako

miyako

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

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

Отправлено 08 Февраль 2013 - 11:56

Просмотр сообщенияminiup (08 Февраль 2013 - 11:40) писал:

Вероятно проблема связана с тем что у вас в шаблоне вставлено 2 таких кнопки.
Скрытый текст
Нет кнопка одна,вторую не нашел по крайней мере

2) Вам необходимо в файле стилей main.css найти
Скрытый текст

Не совсем то ,что хотел получилось.Первая строка обрывается на середине,вторая строка идет нормально,во всю длину.А надо бы что бы и первая строка шла полностью в длину страницы.
На вашем сайте я не нашла слайдер. Но скорее всего проблема в том, что в строке нужно поставить пробел после точек в тексте

#96 miniup

miniup

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

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

Отправлено 08 Февраль 2013 - 12:00

Просмотр сообщенияmiyako (08 Февраль 2013 - 11:56) писал:

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


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

#97 miyako

miyako

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

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

Отправлено 08 Февраль 2013 - 12:12

Просмотр сообщенияminiup (08 Февраль 2013 - 12:00) писал:

А про стрелку "вверх" ,как решить? такой код у меня один,дубля нет .


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

Куда вы вставили код:
<p id="back-top">
		<a href="#top"><span></span>Вверх</a>
</p>
?

И такой ли у вас скрипт кнопки  в 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;
						});
				});
		});
?

#98 miniup

miniup

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

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

Отправлено 08 Февраль 2013 - 12:40

Вставил после <body>
скрипт кнопки  в js: такой, один в один

#99 Vaccina

Vaccina

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

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

Отправлено 09 Февраль 2013 - 02:55

В данный момент у вас ошибка в файле main.js
Вам необходимо удалить в файле main.js такие строки как

<script type="text/javascript">

и

</script>

#100 miniup

miniup

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

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

Отправлено 09 Февраль 2013 - 03:15

Просмотр сообщенияVaccina (09 Февраль 2013 - 02:55) писал:

В данный момент у вас ошибка в файле main.js
Вам необходимо удалить в файле main.js такие строки как

<script type="text/javascript">

и

</script>
Вы мне ответили в 2.55
Я в это время сам пытался решить проблему,так как ранее не дождался ответа.Вы вероятно и застали этот момент

Я пробовал и с этими строками  </script>   и без них ,проблема  с видимостью кнопки на верху так и не решилась.

Вы так же ответили мне про модификации (другая тема ) ,они так и не работают. Хоть я и убрал
<scripttype="text/javascript">
и
</script>
Обратно в Общие вопросы


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

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

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