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


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


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

#21 Dogruss

Dogruss

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

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

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

Просмотр сообщенияFlagman86@mail.ru (22 Сентябрь 2012 - 12:35) писал:

а адресок сайта можно?

да, candy-wrapper.ru

#22 Flagman86@mail.ru

Flagman86@mail.ru

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

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

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

Думаю тех.потдержка скоро глянет что у вас не так и поможет, я к сожалению Ваш код поглядеть не могу. Либо копируйте сюда коды стрелки из css, js и html, будем думать вместе

#23 Dogruss

Dogruss

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

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

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

Просмотр сообщенияFlagman86@mail.ru (22 Сентябрь 2012 - 12:44) писал:

Думаю тех.потдержка скоро глянет что у вас не так и поможет, я к сожалению Ваш код поглядеть не могу. Либо копируйте сюда коды стрелки из css, js и html, будем думать вместе

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("http://candy-wrapper...9/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;
        }
_________________
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>

#24 Flagman86@mail.ru

Flagman86@mail.ru

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

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

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

попробуй в css вот это:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}

заменить на это:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
}

Так стрелка будет справа стоять. ну просто глянем заработает вобще или нет

#25 Dogruss

Dogruss

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

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

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

Просмотр сообщенияFlagman86@mail.ru (22 Сентябрь 2012 - 13:16) писал:

попробуй в css вот это:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}

заменить на это:
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
right: 30px;
}

Так стрелка будет справа стоять. ну просто глянем заработает вобще или нет


емое))) получилось пасиб!!!!!!!!!!!!!!!!!!!))) щас буду править картику)))

#26 Flagman86@mail.ru

Flagman86@mail.ru

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

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

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

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

#27 Dogruss

Dogruss

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

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

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

ок  :rolleyes:

еще раз спасибо!

#28 Flagman86@mail.ru

Flagman86@mail.ru

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

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

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

прозрачность у меня появилась когда вот так в css прописал блок путь к картинке:
#back-top span {
    -moz-transition: all 1s ease 0s;
    background: url("http://gytalin.ru/we...5/up-arrow.png") no-repeat scroll center center #DDDDDD;
    border-radius: 50px 50px 50px 50px;
    display: block;
    height: 64px;
    margin-bottom: 7px;
    width: 64px;
}

ну и так она закругляется сразу)))высоту можешь менять как те удобно впринципе
Мне вот все интересно почему слева стрелка не появляется....

#29 Dogruss

Dogruss

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

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

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

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

#30 Flagman86@mail.ru

Flagman86@mail.ru

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

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

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

но почему всетаки с помощью того как описала Vaccina у меня стрелка с лева не появляется, а вот справа легко...

#31 Vaccina

Vaccina

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

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

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

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

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

замените на left

#32 Dogruss

Dogruss

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

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

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

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

#33 Vaccina

Vaccina

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

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

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

У вас на сайте http://candy-wrapper.ru кнопка отображается нормально. Возможно дело в браузере или в кэше. Попробуйте очистить кэш в вашем браузере.

#34 Dogruss

Dogruss

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

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

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

Просмотр сообщенияVaccina (27 Сентябрь 2012 - 12:21) писал:

У вас на сайте http://candy-wrapper.ru кнопка отображается нормально. Возможно дело в браузере или в кэше. Попробуйте очистить кэш в вашем браузере.

Спасибо, проверил на всех браузерах. Попробуйте изменить разрешение экрана, или что проще, уменьшить окно браузера. Вы увидите, что некоторые элементы дизайна оказались над кнопкой, при этом кнопка не работает.

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

  • 1.jpg


#35 Vaccina

Vaccina

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

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

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

Так и должно быть, так работает свойство position: fixed; Могу предложить использовать другую реализацию - где данные сдвиги исключены с использованием других вариантов отображения. Подобных реализаций очень много http://www.google.ru...&q=jquery вверх

#36 Dogruss

Dogruss

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

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

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

Просмотр сообщенияVaccina (01 Октябрь 2012 - 11:57) писал:

Так и должно быть, так работает свойство position: fixed; Могу предложить использовать другую реализацию - где данные сдвиги исключены с использованием других вариантов отображения. Подобных реализаций очень много http://www.google.ru...&q=jquery вверх
спасибо!

#37 onwion

onwion

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

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

Отправлено 29 Октябрь 2012 - 21:29

Как изменить размер кнопки? у меня большая и не красивая Безымянный.png а хочу бы была без бортов просто кнопка как это сделать?up-arrow.png

#38 Vaccina

Vaccina

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

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

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

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

#39 onwion

onwion

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

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

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

onwion.com

#40 Koderhan

Koderhan

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

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

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

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

onwion.com
Изменение высоты кнопки.
В файле 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;
		}





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

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