Отключен JavaScript

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

6

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

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

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

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

#1 velena168

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

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

ГородСанкт- Петербург

Отправлено 09 Сентябрь 2012 - 12:41

Заметила сегодня в админке новую кнопочку Наверх. Спасибо. Очень ее не хватало. А, как бы на сайте сделать такую кнопку? Можно подробный код и куда вставить? Именно такую?

Наверх

#2 optomizkitaya

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

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

ГородSpb

Отправлено 09 Сентябрь 2012 - 23:48

присоединяюсь, тоже помогла бы такая кнопка!

Наверх

#3 Vaccina

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

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

Отправлено 10 Сентябрь 2012 - 07:51

Аналогичная реализация описана тут http://jemand.ru/kno...-na-css-jquery/
Вам останется только стили изменить под себя. Не подключайте библиотеку jquery.min.js она у вас уже подключена.

Наверх

#4 velena168

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

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

ГородСанкт- Петербург

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

Vaccina (10 Сентябрь 2012 - 07:51) писал:

Аналогичная реализация описана тут http://jemand.ru/kno...-na-css-jquery/
Вам останется только стили изменить под себя. Не подключайте библиотеку jquery.min.js она у вас уже подключена.

Получилась статичная надпись слева, а не плавающая кнопка справа. Можно поподробней? Хочется как в админке 1 к 1.

Наверх

#5 Vaccina

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

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

Отправлено 11 Сентябрь 2012 - 08:18

Вероятно вы стили забыли вставить. Весь CSS нужно добавлять в файл main.css а JavaScript в main.js, ну а HTML в одноименный шаблон "HTML".
Пожалуйста, приведите пример на вашем сайте.

Если вам необходимо отображение справа, то просто меняем

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

на

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

Наверх

#6 velena168

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

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

ГородСанкт- Петербург

Отправлено 11 Сентябрь 2012 - 12:35

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

Вероятно вы стили забыли вставить. Весь CSS нужно добавлять в файл main.css а JavaScript в main.js, ну а HTML в одноименный шаблон "HTML".
Пожалуйста, приведите пример на вашем сайте.

Если вам необходимо отображение справа, то просто меняем

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

на

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

alinka1.ru/catalog/govorashhije-i-muzykalnyje-knigi

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

Наверх

#7 semi-svet.ru

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

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

Отправлено 11 Сентябрь 2012 - 15:01

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

Вероятно вы стили забыли вставить. Весь CSS нужно добавлять в файл main.css а JavaScript в main.js, ну а HTML в одноименный шаблон "HTML".
Пожалуйста, приведите пример на вашем сайте.

Если вам необходимо отображение справа, то просто меняем

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

на

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

У меня тоже ничего не вышло.
Не могли бы Вы описать пошагово все необходимые действия?
Сайт semi-svet.ru

Наверх

#8 Yurren

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

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

ГородСамара

Отправлено 11 Сентябрь 2012 - 17:14

Аналогично! Пытался делать - результат 0. Всё снес и хотелось бы пошаговую инструкцию для особо одарённых

Наверх

#9 semi-svet.ru

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

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

Отправлено 12 Сентябрь 2012 - 07:16

У меня заработало, но как-то не так (кнопку видно всегда, даже вверху страницы, и она на прозрачная). А хотелось бы, чтобы кнопка была прозрачна (как в админке) и не появлялась наверху страницы.
Нам никто не желает помочь?

Наверх

#10 Vaccina

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

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

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

Наверх

#11 semi-svet.ru

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

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

Отправлено 12 Сентябрь 2012 - 09:39

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

Наверх

#12 velena168

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

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

ГородСанкт- Петербург

Отправлено 12 Сентябрь 2012 - 16:07

Тоже запилила.

Спасибо, Vaccina за Ваше терпение и подробное объяснение для "самых одаренных".

Красиво так получилось

Наверх

#13 Flagman86@mail.ru

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

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

ГородМосква

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

сделал, всё клево, а как поменять цвет фона вокруг стрелки? чтоб он синий был хочется. Сайт Gytalin.ru

Наверх

#14 Flagman86@mail.ru

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

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

ГородМосква

Отправлено 16 Сентябрь 2012 - 21:31

Во, разобрался уже) Только в IE стрелки нету почему то...
main.css выглядит так:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
}
#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: #3a15e1;
        }
#back-top span {
        width: 108px;
        height: 108px;
        display: block;
        margin-bottom: 7px;
        background: #ddd url(http://gytalin.ru/we...55/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: #3a15e1;
        }

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>

Наверх

#15 Vaccina

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

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

Отправлено 17 Сентябрь 2012 - 10:32

Попробуйте класс

#back-top span {
	-moz-transition: all 1s ease 0s;
	background: url("http://gytalin.ru/web/upload/assets/images/9/8555/up-arrow.png") no-repeat scroll center center #DDDDDD;
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 108px;
	margin-bottom: 7px;
	width: 108px;
}

заменить на

#back-top span {
	background: url("http://gytalin.ru/web/upload/assets/images/9/8555/up-arrow.png") no-repeat #DDDDDD;
	border-radius: 15px 15px 15px 15px;
	display: block;
	height: 108px;
	margin-bottom: 7px;
	width: 108px;
}

По сути в IE9 отображение корректное. Не отображается только IE8=<
Версии IE8 и ниже считаются устаревшими.

Найдите и удалите в шаблоне "HTML" строку вида

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Наверх

#16 Flagman86@mail.ru

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

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

ГородМосква

Отправлено 17 Сентябрь 2012 - 11:04

сделал, вроде помогло, всё теперь клево, даже закруглил иконку=) красотища, спасибки)

Наверх

#17 Dogruss

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

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

ГородМосква

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

у мню не получилось((((

Наверх

#18 Flagman86@mail.ru

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

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

ГородМосква

Отправлено 22 Сентябрь 2012 - 12:23

чуть выше уважаемая Vaccina всё описало просто совершенно. Что именно у Вас не получилось? по пунктам всё сделали? рисунок свой закачали на сайт? ссылку к нему заменили?

Наверх

#19 Dogruss

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

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

ГородМосква

Отправлено 22 Сентябрь 2012 - 12:27

мне тоже так показалось, скопировал все как написано, указав адрес изображения в строке background: #ddd url(http://candy-wrapper...39/up-arrow.png) no-repeat center center;