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

 

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

 

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

 

Спасибо!

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

"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>

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

 

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

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 ноября 201312 г пользователем 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`ом сделал.

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