Отключен JavaScript

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

6

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

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

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

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

#241 Danil

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

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

Отправлено 04 Апрель 2015 - 09:49

Iuhenio (03 Апрель 2015 - 21:08) писал:

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

Как я понимаю, первый код отличается от второго только строкой ({ASSETS_IMAGES_PATH}up-arrow.png)
В любом случае я ведь его копипастю

не могли бы подсказать, где именно ошибка?
Хоть сегодня и пятница, но я трезв, как стёклышко, честное слово

))

Здравствуйте.
Ошибки исправили, теперь кнопка вверх отображается.

Наверх

#242 Iuhenio

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

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

Отправлено 04 Апрель 2015 - 16:24

Danil, большое спасибо! А можно сделать, чтобы она была без фона? Просто только стрелка все? А то на данный момент вокруг нее большой квадратик белого цвета...

Наверх

#243 Danil

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

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

Отправлено 04 Апрель 2015 - 16:44

Iuhenio (04 Апрель 2015 - 16:24) писал:

Danil, большое спасибо! А можно сделать, чтобы она была без фона? Просто только стрелка все? А то на данный момент вокруг нее большой квадратик белого цвета...

Зайдите в раздел сайт-редактор шаблонов и отредактируйте(обрежьте белый фон) изображение up-arrow.png.

Наверх

#244 Iuhenio

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

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

Отправлено 04 Апрель 2015 - 17:04

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

Наверх

#245 Danil

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

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

Отправлено 04 Апрель 2015 - 17:14

Iuhenio (04 Апрель 2015 - 17:04) писал:

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

Попробуйте сделать белые края прозрачными.

Наверх

#246 Iuhenio

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

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

Отправлено 05 Апрель 2015 - 22:32

Подскажите, пожалуйста, как сделать, чтобы стрелка вверх не смещалась при масштабировании страницы браузера? (прикрепил скриншот)

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

Наверх

#247 Cupuyc

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

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

Отправлено 06 Апрель 2015 - 11:28

Iuhenio (05 Апрель 2015 - 22:32) писал:

Подскажите, пожалуйста, как сделать, чтобы стрелка вверх не смещалась при масштабировании страницы браузера? (прикрепил скриншот)

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

Наверх

#248 Iuhenio

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

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

Отправлено 06 Апрель 2015 - 14:55

Сириус, думаю, будет лучше, если она при увеличении или уменьшении страницы просто будет оставаться на своем месте (т.е. в нижнем левом углу страницы)... Как и все картинки на сайте - они ведь не "прыгают" ... Подскажите, пожалуйста, как это сделать?

Наверх

#249 Cupuyc

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

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

Отправлено 06 Апрель 2015 - 16:36

Iuhenio (06 Апрель 2015 - 14:55) писал:

Сириус, думаю, будет лучше, если она при увеличении или уменьшении страницы просто будет оставаться на своем месте (т.е. в нижнем левом углу страницы)... Как и все картинки на сайте - они ведь не "прыгают" ... Подскажите, пожалуйста, как это сделать?

На данный момент она имеет фиксированное местоположение на экране и не перемещается при скроллинге страницы, если это изменить, то доступ к ней будет невозможен из большей части страницы(она будет находиться в "подвале"). К сожалению нельзя закрепить её таким образом чтобы при увеличении страницы кнопка "вверх" не перекрывала изображения.

Наверх

#250 like.hornet.6

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

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

ГородРостов-на-Дону

Отправлено 14 Январь 2017 - 00:42

Вопрос по кнопке ВВЕРХ.
Шаблон радость, кнопка сейчас есть, но расположение у неё снизу справа.

Есть ли возможность переместить её влево, чтобы было наподобие вконтактовской - на всю высоту и толщиной в пикселей 50 или около того.
Всё на изображении показал.

Наверх

#251 Vaccina

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

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

Отправлено 14 Январь 2017 - 04:30

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

#Go_Top {
	position: fixed;
	bottom: 45px;
	right: 5px;
	cursor: pointer;
	display: none;
	font-size: 18px;
	width: 110px;
	z-index: 100;
}

замените на:

#Go_Top {
	position: fixed;
	bottom: 0;
	left: 0;
	cursor: pointer;
	display: none;
	font-size: 18px;
	width: 50px;
	z-index: 100;
	top: 0;
}

далее найдите:

#Go_Top span {
	position: absolute;
	top: 30%;
	color: #000000;
}

замените на:

#Go_Top span {
	display:none;
}
#Go_Top img {
	top: 45%;
	position: absolute;
	left: 0;
}

Наверх

#252 like.hornet.6

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

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

ГородРостов-на-Дону

Отправлено 15 Январь 2017 - 23:06

Vaccina (14 Январь 2017 - 04:30) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

#Go_Top {
position: fixed;
bottom: 45px;
right: 5px;
cursor: pointer;
display: none;
font-size: 18px;
width: 110px;
z-index: 100;
}

замените на:

#Go_Top {
position: fixed;
bottom: 0;
left: 0;
cursor: pointer;
display: none;
font-size: 18px;
width: 50px;
z-index: 100;
top: 0;
}

далее найдите:

#Go_Top span {
position: absolute;
top: 30%;
color: #000000;
}

замените на:

#Go_Top span {
display:none;
}
#Go_Top img {
top: 45%;
position: absolute;
left: 0;
}

Благодарю за ответ. Немного доработал - и получилось то что нужно.
Спасибо.

Наверх

#253 IFullHaus

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

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

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

Здравствуйте, коды вставил, кнопка не появляется, в чем проблема?

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>

Наверх

#254 IFullHaus

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

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

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

Наблюдалась кнопка текстом "наверх" в верхнем левом углу. Пропадала как опускал странницу

Наверх

#255 IFullHaus

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

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

Отправлено 30 Январь 2017 - 01:39

Вопросы уже недели 2 висят без внимания! Куда все пропали?

Наверх

#256 Mr.Nito

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

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

Отправлено 02 Февраль 2017 - 17:10

IFullHaus (26 Январь 2017 - 10:32) писал:

Наблюдалась кнопка текстом "наверх" в верхнем левом углу. Пропадала как опускал странницу

Здравствуйте.Кнопку установил.
В шаблоне HTML после <body> добавил

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

В файле 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;
		right:10px;
		}
#back-top a {
		width: 60px;
		display: block;
		text-align: center;
		font: 11px/100% Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #000;
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		}
#back-top a:hover {
		color: #000;
		}
#back-top span {
		width: 64px;
		height: 64px;
		display: block;
		margin-bottom: 7px;
		background:  url({ASSETS_IMAGES_PATH}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;	 }
/**/

Изображение стрелки прикрепил к сообщению

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

Наверх

#257 IFullHaus

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

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

Отправлено 02 Февраль 2017 - 17:17

Mr.Nito (02 Февраль 2017 - 17:10) писал:

Здравствуйте.Кнопку установил.
В шаблоне HTML после <body> добавил

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

В файле 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;
right:10px;
}
#back-top a {
width: 60px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
#back-top span {
width: 64px;
height: 64px;
display: block;
margin-bottom: 7px;
background: url({ASSETS_IMAGES_PATH}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; }
/**/

Изображение стрелки прикрепил к сообщению

Спасибо Вам большое. Сегодня вечером посмотрю и отпишусь
Всё проверил, и на телефоне и на компьютере, всё работает отлично
Поменял местами только.
в css

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

изменил на

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

Наверх

#258 smog-device.artem

Новичок

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

Отправлено 26 Февраль 2017 - 16:27

Большое спасибо модераторам за ценные советы.
Пожалуй, тоже дам совет участникам форума: сначала прочитайте ветку с первой страницы, а потом уже задавайте вопросы. Уверяю Вас все ответы там уже есть.
P.S. сам только что завершил установку кнопки, потратил 1,5 часа, вылезала куча проблем, но все решения были найдены путем более детального изучения данной ветки и ответов модераторов