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

[Kapralez 0]

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

 

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

 

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

 

Спасибо!

[Bot 5]

Обратите внимание

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

[dmitrijkv 0]

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

[newbie 1723]

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

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

 

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

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

[Kapralez 0]

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

 

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

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

 

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

Изменено 27 ноября 2013 пользователем Kapralez

[Dmitriy427 198]

Не надо никакого 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, позицию кнопки и бекграунд нужно к конкретному стилю подгонять.

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

[Kapralez 0]

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

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