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


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


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

#41 onwion

onwion

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

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

Отправлено 30 Октябрь 2012 - 13:59

Просмотр сообщенияKoderhan (30 Октябрь 2012 - 13:54) писал:

Изменение высоты кнопки.В файле main.csstemplate (Сайт-> Редактор тем) найти код:
  #back-top span {	background: url("http://files.storeland.ru/web/upload/sitefiles/3/269/268906/up-arrow.png") no-repeat #DDDDDD;	border-radius: 15px 15px 15px 15px;	display: block;	height: 110px;	margin-bottom: 7px;	width: 100px;		}
Заменить на :
  #back-top span {	background: url("http://files.storeland.ru/web/upload/sitefiles/3/269/268906/up-arrow.png") no-repeat #DDDDDD;	border-radius: 15px 15px 15px 15px;	display: block;	height: 30px;/*высота кнопки*/	margin-bottom: 7px;	width: 100px;		}

Почти идеально,а возможно убрать белый фон? т.е что бы был один рисунок?

#42 Koderhan

Koderhan

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

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

Отправлено 30 Октябрь 2012 - 14:10

Просмотр сообщенияonwion (30 Октябрь 2012 - 13:59) писал:

Почти идеально,а возможно убрать белый фон? т.е что бы был один рисунок?
Изменить фон блока. В файле main.csstemplate найти код:
#back-top span {
	background: url("http://files.storeland.ru/web/upload/sitefiles/3/269/268906/up-arrow.png") no-repeat #DDDDDD;
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 30px;/*высота кнопки*/
	margin-bottom: 7px;
	width: 100px;
}
Заменить на :
  #back-top span {
	background: url("http://files.storeland.ru/web/upload/sitefiles/3/269/268906/up-arrow.png") no-repeat;/*убрали заливку цветом*/
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 30px;
	margin-bottom: 7px;
	width: 100px;
}


#43 onwion

onwion

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

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

Отправлено 30 Октябрь 2012 - 14:22

Спасибо.

#44 onwion

onwion

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

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

Отправлено 30 Октябрь 2012 - 14:22

Спасибо.

#45 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 05 Ноябрь 2012 - 16:48

Поставила кнопку Вверх, а потом поняла, что кнопка бесполезная. Может быть, конечно, у меня много инфы на страницах, а кнопка их закрывает и отвлекает от материала. В целом, народ все равно продолжает скролить. И также я считаю эту кнопку вредной, потому как возвращаясь назад скролом, посетитель может зацепиться взглядом за что-нибудь и не сразу покинет сайт/страницу. У кого еще какое мнение на данную кнопку?

#46 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 12 Ноябрь 2012 - 20:33

Неужели вопрос никому не интересен?

#47 kaisyRUS

kaisyRUS

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

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

Отправлено 28 Ноябрь 2012 - 10:09

Просмотр сообщенияogonek7777 (12 Ноябрь 2012 - 20:33) писал:

Неужели вопрос никому не интересен?
Возможно Вы и правы)

#48 kaisyRUS

kaisyRUS

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

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

Отправлено 28 Ноябрь 2012 - 11:10

Сделал, всё вышло. Как теперь сделать: чтоб пока на неё не наведешь она была полупрозрачной. Делал двойную картинку - не выходит. Как в админке

#49 ALEXp

ALEXp

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

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

Отправлено 28 Ноябрь 2012 - 11:22

одну картинку, что будет на сайте отображается сама по себе, сделай полупрозрачной, а вторую, которая появиться при наведении соответственно сделай такой какою хочешь.

#50 Koderhan

Koderhan

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

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

Отправлено 28 Ноябрь 2012 - 11:28

Просмотр сообщенияkaisyRUS (28 Ноябрь 2012 - 11:10) писал:

Сделал, всё вышло. Как теперь сделать: чтоб пока на неё не наведешь она была полупрозрачной. Делал двойную картинку - не выходит. Как в админке
Как вставить кнопку "Наверх"
Не забудьте сделать резервную копию сайта перед внесением изменений в шаблоны.(Сайт-> Редактор тем, Создать бэкап дизайн-шаблона )
Оригинал тут http://jemand.ru/kno...-na-css-jquery/
В файл 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;
}
В файл html перед тегом <head> добавить:
<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>

ScreenShot 160.jpg

В конце файла html добавить код перед  <div id="footer">:
<p id="back-top">
<a href="#top"><span></span>Вверх</a>
</p>
ScreenShot 161.jpg

#51 ALEXp

ALEXp

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

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

Отправлено 28 Ноябрь 2012 - 11:30

Просмотр сообщенияogonek7777 (12 Ноябрь 2012 - 20:33) писал:

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

#52 kaisyRUS

kaisyRUS

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

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

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

Просмотр сообщенияKoderhan (03 Декабрь 2012 - 14:36) писал:

Здравствуйте. Чтобы сделать кнопку поверх всех элементов на страницы.
Вы можете сделать следующее.
В панели администратора, Сайт-> Редактор тем.
Найти код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
}
Заменить на:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
}
Не помогло. Не выходит поверх

#53 Koderhan

Koderhan

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

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

Отправлено 04 Декабрь 2012 - 12:50

Здравствуйте.
В панели администратора, Сайт-> Редактор тем.
Открыть файл main.csstemplate.
Добавить код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
}
ScreenShot 185.jpg

#54 kaisyRUS

kaisyRUS

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

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

Отправлено 04 Декабрь 2012 - 16:57

Просмотр сообщенияKoderhan (04 Декабрь 2012 - 12:50) писал:

Здравствуйте.
В панели администратора, Сайт-> Редактор тем.
Открыть файл main.csstemplate.
Добавить код:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
z-index: 100;
}
Прикрепленный файл ScreenShot 185.jpg
Вышло. Спасибо

#55 Acno

Acno

    Новичок

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

Отправлено 04 Декабрь 2012 - 21:50

Здравствуйте!! Выше писали, что все очень понятно. но у меня не вышло ничего!
Кнопка вообще не появилась. Я сделала все как написано по пунктам. Может быть в main.css надо в определенное место ставить? Я в самый конец зафигачила :mellow:

Просмотр сообщенияAcno (04 Декабрь 2012 - 21:49) писал:

Здравствуйте!! Выше писали, что все очень понятно. но у меня не вышло ничего!
Кнопка вообще не появилась. Я сделала все как написано по пунктам. Может быть в main.css надо в определенное место ставить? Я в самый конец зафигачила :mellow:


#56 Vaccina

Vaccina

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

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

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

В файле стилей main.css найдите

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

и замените на

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


#57 arver

arver

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

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

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

Здравствуйте,по выше написанному от Koderhan,я добавил код в соответствующие строки,ничего не получилось(как же,все же сделать круглую кнопку вверх и она бы выделялась как в разделе админка?).Также было бы интересно как можно сделать так,дабы стрелочка не заходила в область подвала

ссылка на магазин http://arver-shop.storeland.ru/

#58 Koderhan

Koderhan

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

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

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

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

Здравствуйте,по выше написанному от Koderhan,я добавил код в соответствующие строки,ничего не получилось(как же,все же сделать круглую кнопку вверх и она бы выделялась как в разделе админка?).Также было бы интересно как можно сделать так,дабы стрелочка не заходила в область подвала

ссылка на магазин http://arver-shop.storeland.ru/
Кнопка появляется только в том случае если скролить надо очень много.
Попробуйте изменить размер окна браузера.
Для того чтобы кнопка была выше подвала, можно изменить стили.
Открыть файл main.csstemplate.
Найти код:
/* Код для кнопки*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
}
Заменить на:
/* Код для кнопки*/
#back-top {
position: fixed;
bottom: 110px;
margin-left: -150px;
right: 30px;
}
Если не получиться то можете сделать так.
Пожалуйста, попробуйте заменить код в файле HTML.

Найти код:
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 700) {
	 $('#back-top').fadeIn();
} else {
	 $('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
	 scrollTop: 0
}, 800);
return false;
});
});
});
Заменить на:
<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>


#59 arver

arver

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

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

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

все тот же вопрос,а как сделать кнопку круглой,область все равно квадратной делается....

#60 support 2.0

support 2.0

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

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

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

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

все тот же вопрос,а как сделать кнопку круглой,область все равно квадратной делается....

У меня Ваша кнопка имеет вот такой вид (Прикрепленные изображения). Вроде область не квадратная или может Вы поподробнее объясните что Вам не нравится? Чтобы кнопка не спучкалась в футер, замените этот блок в файле main.css
#back-top {
position: fixed;
bottom: 110px;
margin-left: -150px;
right: 30px;
}

на этот
#back-top {
position: fixed;
bottom: 19%;
margin-left: -150px;
right: 10%;
}

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

  • ScreenShot 17.jpg
  • ScreenShot 18.jpg





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

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