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


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


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

#241 Danil

Danil

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

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

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

Просмотр сообщенияIuhenio (03 Апрель 2015 - 21:08) писал:

RayLi, еще раз все проверил, не нашел, да и не понимаю, как может быть ошибка, если я копирую отсюда и вставляю туда... я ведь не сам его перепечатываю :) Как я понимаю, первый код отличается от второго только строкой ({ASSETS_IMAGES_PATH}up-arrow.png)
В любом случае я ведь его копипастю :) не могли бы подсказать, где именно ошибка?
Хоть сегодня и пятница, но я трезв, как стёклышко, честное слово :)))
Здравствуйте.
Ошибки исправили, теперь кнопка вверх отображается.

#242 Iuhenio

Iuhenio

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

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

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

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

#243 Danil

Danil

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

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

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

Просмотр сообщенияIuhenio (04 Апрель 2015 - 16:24) писал:

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

#244 Iuhenio

Iuhenio

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

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

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

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

#245 Danil

Danil

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

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

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

Просмотр сообщенияIuhenio (04 Апрель 2015 - 17:04) писал:

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

#246 Iuhenio

Iuhenio

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

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

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

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

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

  • масштабирование.jpg


#247 Cupuyc

Cupuyc

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

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

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

Просмотр сообщенияIuhenio (05 Апрель 2015 - 22:32) писал:

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

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

#248 Iuhenio

Iuhenio

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

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

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

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

#249 Cupuyc

Cupuyc

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

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

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

Просмотр сообщенияIuhenio (06 Апрель 2015 - 14:55) писал:

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

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

#250 like.hornet.6

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 179 сообщений
  • ГородРостов-на-Дону

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

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

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

вверх_кнопка.jpg

#251 Vaccina

Vaccina

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

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

Отправлено 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

like.hornet.6

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

  • Пользователи
  • PipPipPip
  • 179 сообщений
  • ГородРостов-на-Дону

Отправлено 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

IFullHaus

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

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

Отправлено 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

IFullHaus

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

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

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

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

#255 IFullHaus

IFullHaus

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

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

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

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

#256 Mr.Nito

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;	 }
/**/

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

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

  • up-arrow.png


#257 IFullHaus

IFullHaus

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

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

Отправлено 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

smog-device.artem

    Новичок

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

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

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




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

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