Jump to content

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


Kapralez
 Share

Recommended Posts

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

 

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

 

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

 

Спасибо!

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 7 months later...

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

Link to comment
Share on other sites

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

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

 

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

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

Link to comment
Share on other sites

  • 4 weeks later...

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

 

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

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

 

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

Edited by Kapralez
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...