Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Kapralez

Кнопка "Наверх" для 3.2.3

Рекомендованные сообщения

Добрый день, уважаемые!

 

Подскажите пожалуйста, как сделать при просмотре темы кнопку "наверх" справа страницы. Примерно как здесь?

 

Хотя вобщем то подойдет любой вариант...

 

Спасибо!

Поделиться сообщением


Ссылка на сообщение
Обратите внимание

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

Поделиться сообщением


Ссылка на сообщение

Прошу прощения, автор видимо решил свою проблему. Но хотелось бы узнать решение, так как тоже интересен этот вариант.

Поделиться сообщением


Ссылка на сообщение

Хотя вобщем то подойдет любой вариант...

- Внизу страницы есть кнопка "Наверх".

 

- В шаблоне post есть скрытая кнопка.

<li class='top hide'><a href='#ipboard_body' class='top' title='{$this->lang->words['back_top']}'>{$this->lang->words['back_top']}</a></li>

Поделиться сообщением


Ссылка на сообщение
11/27/13 18:53 (изменено)

Прошу прощения, автор видимо решил свою проблему. Но хотелось бы узнать решение, так как тоже интересен этот вариант.

 

Проблему то решил, но не так как хотелось бы :) Кнопка "наверх" в каждом сообщении темы (предыдущее сообщение как раз об этом)

jquery вроде может плавающую кнопку делать, но я в этом мало что понимаю

 

Нашел еще одно решение. Чистый html

В globalTemplate в самый низ (перед </body> ) добавить

<a href="#" id="gotop" title='Наверх ^' style='opacity: 0.7; display: inline;'></a>
<a href="#bottom" id='gotobottom' title='Вниз' style='opacity: 0.7; display: inline;'></a>

 

там же найти

<strong>{$this->lang->words['stat_gzip']}</strong> {$stats['gzip_status']}
</div>
</if>

 

и после поставить

<a id="bottom"></a>

 

 

В стиль ipb_style.css добавить этот код

#gotop {position: fixed;
width: 45px;
height: 45px;
right: 5px;
bottom: 78px;
display: block;
background: url("{style_images_url}/gotop2.png") no-repeat;
z-index: 9998;
display: none;
}
#gotobottom {
position: fixed;
width: 45px;
height: 45px;
bottom: 35px;
right: 5px;
display: block;
background: url("{style_images_url}/gotop1.png") no-repeat;
z-index: 9998;
display: none;
}

 

ну и не забываем картинки само собой

Изменено пользователем Kapralez

Поделиться сообщением


Ссылка на сообщение

Не надо никакого JQuery, что бы сделать плавающую кнопку. В ipb_styles.css отредактируйте элемент #backtotop:

#backtotop { 
background: #7799C5;
border-radius: 16px;
height: 24px;
line-height: 20px;
opacity: 0.6;
outline: 0px none currentColor;
position: fixed;
right: 7px;
text-align: center;
top: 140px;
transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
width: 24px;
}

Примерно так. Размер, border-radius, позицию кнопки и бекграунд нужно к конкретному стилю подгонять.

Скрипт понадобится только если кнопку необходимо скрывать/показывать.

Поделиться сообщением


Ссылка на сообщение

Сделал как описал выше, полностью устраивает. Ну еще смену цвета кнопки при наведении hover`ом сделал.

Всем спасибо за помощь!

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...