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


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

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

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

#141 miyako

miyako

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

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

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

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

не совсем понимаю как эти стили добавить?

Найдите код:
#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;
}
в нем    width: 108px; замените на :
   width: 108px;
opacity:0.4;

Далее найдите код:
#back-top a:hover span {
		background-color: #777777;
}
и замените на:
#back-top a:hover span {
		background-color: #777777;
opacity: 1;
}

#142 Вадим463

Вадим463

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

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

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

Как сделать так, чтобы кнопка отображалась слева, а не справа?
Пробовал добавлять код left: 30px, но она исчезла совсем!!!
Сейчас это выглядит вот так:
Кнопка вверх.jpg

Кроме того, я хочу чтобы кнопка отображалась без серого ореола вокруг!!!!
как реализовать это???
сейчас она отображается вот так:
Вверх.jpg

А нужно чтобы отображалась так:
up.png

#143 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияВадим463 (20 Июль 2013 - 15:31) писал:

Как сделать так, чтобы кнопка отображалась слева, а не справа?
Пробовал добавлять код left: 30px, но она исчезла совсем!!!
Сейчас это выглядит вот так:
Прикрепленный файл Кнопка вверх.jpg

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

А нужно чтобы отображалась так:
Прикрепленный файл up.png
В main.css код 
#back-top {
position: fixed;
left: 30px;
bottom: 30px;
margin-left: -150px;
}
замените на 
#back-top {
position: fixed;
left: 30px;
bottom: 30px;
}
Далее код 
#back-top span {
width: 87px;
height: 87px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://files.storeland.net/f680/943/up.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: 87px;
height: 87px;
display: block;
margin-bottom: 7px;
background: url(http://files.storeland.net/f680/943/up.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
И в main.js в коде 
<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>
удалите первую и последнюю строки.

#144 Вадим463

Вадим463

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

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

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

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

В main.css код 
#back-top {
position: fixed;
left: 30px;
bottom: 30px;
margin-left: -150px;
}
замените на 
#back-top {
position: fixed;
left: 30px;
bottom: 30px;
}
Далее код 
#back-top span {
width: 87px;
height: 87px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://files.storeland.net/f680/943/up.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: 87px;
height: 87px;
display: block;
margin-bottom: 7px;
background: url(http://files.storeland.net/f680/943/up.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
И в main.js в коде 
<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>
удалите первую и последнюю строки.
Спасибо, получилось!

#145 kaxabor

kaxabor

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

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

Отправлено 23 Август 2013 - 19:44

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

#146 support 2.0

support 2.0

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

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

Отправлено 23 Август 2013 - 21:05

Просмотр сообщенияkaxabor (23 Август 2013 - 19:44) писал:

Все сделал как написало но почему то надпись есть наверх и все работает а вот фотки самой кнопки нет хотя и адрес прописал и загрузил фото вродебы все сделал правильно но есть только надпись наверх
Сейчас на Вашем сайте (228382) я этого не вижу: ни кнопки, ни надписи. Вы убирали свои изменения?

#147 kaxabor

kaxabor

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

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

Отправлено 24 Август 2013 - 16:59

Просмотр сообщенияsupport 2.0 (23 Август 2013 - 21:05) писал:

Сейчас на Вашем сайте (228382) я этого не вижу: ни кнопки, ни надписи. Вы убирали свои изменения?

Да вроде осталась надпись вверх и она работает http://150w.ru/catalog/VITALUCE (падпис распологается слева) она на всех страницах есть и на главной тоже

Фото загружено

в чем причина адрес прописан

#148 support 2.0

support 2.0

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

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

Отправлено 24 Август 2013 - 17:05

Просмотр сообщенияkaxabor (24 Август 2013 - 16:59) писал:

Да вроде осталась надпись вверх и она работает http://150w.ru/catalog/VITALUCE (падпис распологается слева) она на всех страницах есть и на главной тоже

Фото загружено

в чем причина адрес прописан
в разделе сайт -> редактор шаблонов -> измените название изображения
up-arrow.png.png
на
up-arrow.png

#149 kaxabor

kaxabor

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

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

Отправлено 24 Август 2013 - 20:30

Просмотр сообщенияsupport 2.0 (24 Август 2013 - 17:05) писал:

в разделе сайт -> редактор шаблонов -> измените название изображения
up-arrow.png.png
на
up-arrow.png

Так у меня и адрес так же прописан как up-arrow.png.png смысл менять

#150 miyako

miyako

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

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

Отправлено 25 Август 2013 - 11:16

Просмотр сообщенияkaxabor (24 Август 2013 - 20:30) писал:

Так у меня и адрес так же прописан как up-arrow.png.png смысл менять

Нужно именно название up-arrow в формате png, а не название up-arrow.png в формате png

#151 kaxabor

kaxabor

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

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

Отправлено 25 Август 2013 - 12:12

Просмотр сообщенияmiyako (25 Август 2013 - 11:16) писал:

Нужно именно название up-arrow в формате png, а не название up-arrow.png в формате png

Интересно кому же это так надо!!!

Изменил. Но к сожалению это не помогает, как небыло кнопки так и нет

#152 miyako

miyako

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

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

Отправлено 26 Август 2013 - 10:06

Просмотр сообщенияkaxabor (25 Август 2013 - 12:12) писал:

Интересно кому же это так надо!!!

Изменил. Но к сожалению это не помогает, как небыло кнопки так и нет

Найдите в шаблоне HTML код - 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jswitch.js"></script>
и удалите его

Так как этот код вызывает ошибки

По кнопке -
Найдите код в шаблоне HTML - 
   <p id="back-top">
		<a href="#top"><span></span>Вверх</a>
</p>
и удалите его.

Далее в шаблоне HTML найдите код (строка 63)- 
<body lang="ru">
и замените на - 
<body lang="ru">
<p id="back-top">
		<a href="#top"><span></span>Вверх</a>
</p>

#153 kaxabor

kaxabor

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

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

Отправлено 26 Август 2013 - 10:45

Просмотр сообщенияmiyako (26 Август 2013 - 10:06) писал:

Найдите в шаблоне HTML код -
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jswitch.js"></script>
и удалите его

Так как этот код вызывает ошибки

По кнопке -
Найдите код в шаблоне HTML -
<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>
и удалите его.

Далее в шаблоне HTML найдите код (строка 63)-
<body lang="ru">
и замените на -
<body lang="ru">
<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>

Не чего не произошло кроме того что надпись от кнопки уехала наверх страницы

#154 Stasya

Stasya

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

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

Отправлено 26 Август 2013 - 15:57

В файле 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("http://150w.storeland.net/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: -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("http://150w.storeland.net/up-arrow.png") no-repeat center center;
backgorund-size: cover;
-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;
}

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

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

  • Символы.png

#155 kaxabor

kaxabor

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

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

Отправлено 26 Август 2013 - 17:33

Просмотр сообщенияStasya (26 Август 2013 - 15:57) писал:

В файле 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("http://150w.storeland.net/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: -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("http://150w.storeland.net/up-arrow.png") no-repeat center center;
backgorund-size: cover;
-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;
}

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

Спасибо большое но
Не помогло
даже надпись вверх пропала

#156 Stasya

Stasya

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

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

Отправлено 26 Август 2013 - 20:16

Зайдя на Ваш сайт, в коде не обнаружила никаких изменений. Код файла main.css должен выглядеть вот так как на скриншоте. А не как на скришоте выше.

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

  • нужно.png

#157 kaxabor

kaxabor

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

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

Отправлено 26 Август 2013 - 20:34

Просмотр сообщенияStasya (26 Август 2013 - 20:16) писал:

Зайдя на Ваш сайт, в коде не обнаружила никаких изменений. Код файла main.css должен выглядеть вот так как на скриншоте. А не как на скришоте выше.

Появилась кнопка спасибо большое только она очень большая

#158 kaxabor

kaxabor

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

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

Отправлено 26 Август 2013 - 20:51

Спасибо большое Stasya  всё получилось ))))

#159 Настя

Настя

    Новичок

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

Отправлено 27 Август 2013 - 02:36

тоже поменяла положение кнопки на right и она появилась. спасибо.

#160 zuikof

zuikof

    Новичок

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

Отправлено 25 Сентябрь 2013 - 13:55

прочитал все страницы, сделал все исправления, ничего не помогает. Кнопка не появляется.
Что не так?
номер аккаунта 218825
Help!
Обратно в Общие вопросы


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

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

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