Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

6

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

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

Авторизуйтесь для ответа в теме

Сообщений в теме: 257

#101 Koderhan

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

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

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

miniup (09 Февраль 2013 - 03:15) писал:

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

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

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

Попробуйте удалить из main.js.
код:

});

Примерно на 535 строке.

Наверх

#102 miniup

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

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

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

Koderhan (09 Февраль 2013 - 12:57) писал:

Попробуйте удалить из main.js.
код:

});

Примерно на 535 строке.

Убрал,толку нет.Модификации не работают.

Наверх

#103 miniup

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

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

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

ответит кто-нибудь ?

Наверх

#104 Vaccina

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

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

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

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

$(document).ready(function(){

перенести, вставив её перед строкой

// Валидация формы на странице оформления заказа, а так же формы на страницы связи с администрацией
  $('.order form, .feedbackForm, .clientForm, .goodsDataOpinionAddForm').submit(function(){

Наверх

#105 miniup

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

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

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

Vaccina (12 Февраль 2013 - 02:15) писал:

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

$(document).ready(function(){

перенести, вставив её перед строкой

// Валидация формы на странице оформления заказа, а так же формы на страницы связи с администрацией
$('.order form, .feedbackForm, .clientForm, .goodsDataOpinionAddForm').submit(function(){

Спасибо,с начало не работало,спустя 5 минут все впорядке

Наверх

#106 Alex2512006

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

Пользователи
182 сообщений

ГородРжев, Тверская обл.

Отправлено 13 Март 2013 - 14:59

Koderhan (20 Декабрь 2012 - 10:08) писал:

Если вы хотите сделать кнопку "Наверх" сделать полупрозрачной.
То для этого можно изменить код в файле 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;/*при наведение мышкой уровенб прозрачности изменится на это*/
}

Все получилось

Наверх

#107 romatex

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

Пользователи
301 сообщений

Отправлено 22 Март 2013 - 08:12

поставить такую кнопочку очень легко.

Шаг 1. Добавляем JavaScript в шаблон сайта HTML, перед закрывающим тегом </head>

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

Шаг 2. Добавляем html-код в шаблон HTML сайта перед закрывающим тегом </body>

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

Шаг 3. Добавляем CSS-стили в конец файла main.css

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

Url фоновой картинки со стрелкой подгружается с яндексовских серверов. Можете поменять на свою указав к ней путь.

Что тут можно настроить и изменить под себя:

bottom:90px; – смещение блока с кнопкой относительно низа страницы;
width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может.
padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
color:white; — цвет надписи «вверх»;
border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

Наверх

#108 koloskov

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

Пользователи
376 сообщений

Отправлено 31 Март 2013 - 22:05

Здравствуйте.

Сделал кнопку в принципе как и хотел!

Не могу добиться:

1. чтобы появлялась не сразу, а с кого-то уровня ниже...

думал здесь:

$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {

меняя 50 на 500 ничего не происходит!

2. плавности подъема наверх вообще не наблюдаю...

думаю зависит от

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

что нужно изменить?

3. ну и последнее: наверху фона вылезла черная полоса (выше заставки!) раньше ее вроде бы не было. И где это подправить?

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

Наверх

#109 Koderhan

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

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

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

koloskov (31 Март 2013 - 22:05) писал:

Здравствуйте.

Сделал кнопку в принципе как и хотел!

Не могу добиться:

1. чтобы появлялась не сразу, а с кого-то уровня ниже...

думал здесь:

$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {

меняя 50 на 500 ничего не происходит!

2. плавности подъема наверх вообще не наблюдаю...

думаю зависит от

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

что нужно изменить?

3. ну и последнее: наверху фона вылезла черная полоса (выше заставки!) раньше ее вроде бы не было. И где это подправить?

Пожалуйста, не могли бы сообщить адрес магазина или номер аккаунта.
Попробуйте изменить значение 50 на 250.

Наверх

#110 koloskov

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

Пользователи
376 сообщений

Отправлено 01 Апрель 2013 - 11:00

Koderhan (01 Апрель 2013 - 10:22) писал:

Пожалуйста, не могли бы сообщить адрес магазина или номер аккаунта.

Спасибо за помощь с кнопкой.

Наверх

#111 pilotnascar

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

Пользователи
24 сообщений

Отправлено 08 Апрель 2013 - 20:44

Vaccina (24 Сентябрь 2012 - 11:46) писал:

У вас в стилях прописана сторона right

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

замените на left

изменил на left кнопка вообще исчезла....
шаблон пластик i-devices.ru
Помогите плс.

Наверх

#112 mikola

Good soo good

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

Городгород Нижний Новгород

Отправлено 08 Апрель 2013 - 21:21

pilotnascar (08 Апрель 2013 - 20:44) писал:

изменил на left кнопка вообще исчезла....
шаблон пластик i-devices.ru
Помогите плс.

Добрый вечер..
Хотелось бы вопрос ещё раз услышать в чем у вас проблема ?

Наверх

#113 Koderhan

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

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

Отправлено 08 Апрель 2013 - 21:22

pilotnascar (08 Апрель 2013 - 20:44) писал:

изменил на left кнопка вообще исчезла....
шаблон пластик i-devices.ru
Помогите плс.

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:


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

Заменить:

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

Наверх

#114 pilotnascar

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

Пользователи
24 сообщений

Отправлено 08 Апрель 2013 - 21:42

Koderhan (08 Апрель 2013 - 21:22) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:


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

Заменить:

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

Спасибо!
Все окэ!!!

Наверх

#115 Flor@@

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

Пользователи
1 959 сообщений

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

1. не поняла насчет закачки рисунка. Где его взять?
2. почему-то квадратик (кнопка) без стрелочки? и слово "вверх" написано под кнопкой, а должно быть в ней.

Наверх

#116 miyako

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

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

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

otdyh-i-son.ru (08 Май 2013 - 05:01) писал:

1. не поняла насчет закачки рисунка. Где его взять?
2. почему-то квадратик (кнопка) без стрелочки? и слово "вверх" написано под кнопкой, а должно быть в ней.

1) можете скачать с сайта - http://jemand.ru/kno...-na-css-jquery/ (Изображение-Сохранить как)
2) демонстрацию также можете посмотреть на сайте, указанном выше. Надпись там под стрелочкой. Если вам нужно в другом месте, то пришлите скриншот. Кнопка без стрелочки у вас, так как скорее всего вы не подгрузили изображение.

Наверх

#117 Flor@@

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

Пользователи
1 959 сообщений

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

Подскажите, пожалуйста, как сделать эту кнопку более темной (когда она неактивная).

Наверх

#118 Сake

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

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

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

Найдите в вашем файле стилей main.css следующий класс

#back-top span {
	background: url("up-arrow.png") 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;
}

и замените его на

#back-top span {
	background: #666;
	border-radius: 15px;
	display: block;
	height: 108px;
	margin-bottom: 7px;
	transition: all 1s ease 0s;
	width: 108px;
}

Наверх

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

Гости

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

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>

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

Наверх

#120 support 2.0

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

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

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

Наталья C. (13 Май 2013 - 14:23) писал:

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

По поводу серого фона, найдите в 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;
	 }