Кнопка плавной прокрутки вверх

Yworld_garry · 28 февраля 2011, 21:54:45

Будет полезно у кого на форуме много разделов, это конечно мое мнение.

Адаптация :

1) Закидываем скрипты jQuery ( во вложении) в папку Themes/default/scripts/
2) Закидываем картинку( во вложении) в папку Themes/ваша тема/images/
3) Добавляем стили для кнопки
Открыть Themes/default(либо ваша тема)/css/index.css
В самый конец добавить

Код Выделить

.scroll-to-top-button{
background: #666 url(../images/Upload.png) center center no-repeat;
width: 32px;
height: 32px;
color: #fff;
font-family: verdana;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
cursor: pointer;
padding: 15px;
margin: 20px;
}

4) Добавляем пару строк в файл /Themes/default(либо ваша тема)/index.template.php

Ищем (для 2 ветки)

Код Выделить

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?rc3"></script>

Выше вставляем

Код Выделить

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/125.js"></script>

Если используете плавающую панельку закладок(http://www.simplemachines.ru/index.php?topic=12033.0), то вставить только скрипт кнопки( в принципе можно объединить скрипты)

5) Добавим блок div для вызова кнопки в файл /Themes/default(либо ваша тема)/index.template.php

Вставить в удобное для вас место, например под копирайт

Код Выделить

echo '
<div style="opacity: 0.8; position: absolute; top: 456px; right: 0px; display:none;" class="scroll-to-top-button"></div>';

Вроде ничего не забыл. Не забываем делать резервные копии файлов

Само творение http://jsfiddle.net/6mMU2/5/ ( правое поле прокрутите вниз)

Настройки в скрипте.

Ломака · 08 марта 2011, 20:25:47

Добавил, +1, очень удобно! Я вот думаю, а как-бы сделать и вторую кнопку, под существующей, чтоб стрелка вниз форума опускалась?

petrfrolon · 10 марта 2011, 11:35:59

Цитата: Ломака от 08 марта 2011, 20:25:47
Добавил, +1, очень удобно! Я вот думаю, а как-бы сделать и вторую кнопку, под существующей, чтоб стрелка вниз форума опускалась?

кажется на этом форуме я видел polosatik, он хорошо сечет в движке

Drakonsa · 10 марта 2011, 15:27:05

Полноценную демку на форуме можно, а то я чет туго понимаю чем этот вариант лучше обычного анкора и position:

Yworld_garry · 10 марта 2011, 18:30:30

На сайте Ломака, крутим вниз и справа появится.
http://www.my-lenovo.ru/

Макар · 10 марта 2011, 20:01:47

Цитата: Ломака от 08 марта 2011, 20:25:47
Добавил, +1, очень удобно! Я вот думаю, а как-бы сделать и вторую кнопку, под существующей, чтоб стрелка вниз форума опускалась?

идешь сюда http://ruseller.com/lessons.php?rub=29&id=555 или сюда http://ruseller.com/lessons.php?rub=2&id=588

и грызешь гранит науки

кстати

Цитата: Yworld_garry от 10 марта 2011, 18:30:30
На сайте Ломака, крутим вниз и справа появится.
http://www.my-lenovo.ru/

кнопочка как раз оттуда , из тех примеров и уроков (я свой слайдер для панели портала тоже на их основе делал)

и кстати

кнопочка не работает при просмотре тем

Yworld_garry · 10 марта 2011, 20:11:17

Собственно да, там есть и есть что почитать использовать.
Но на буржуйских(откуда все уроки), более подробно и больше всяких вкусностей в разы.

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

Может конфликт и стоит добавить. Я не разбирался конечно
var $j = jQuery.noConflict();
var s = $j;

И заменить все $ на $j
Хотя возможно переменную можно и не объявлять, стоит проверить.

Сто проц конфликт чего то, сейчас проверил на одном форуме. Все работает.

Макар · 10 марта 2011, 20:17:02

решение для форума Ломака http://www.simplemachines.ru/index.php?topic=2472.msg89641#msg89641

заодно и цитировать выделенное заработает

Цитата: Yworld_garry от 10 марта 2011, 20:11:17
Может конфликт и стоит добавить. Я не разбирался конечно
var $j = jQuery.noConflict();

можно
но зачем тянуть две одинаковые библиотеки ? ~~нам кузнец не нужен~~ достаточно одной

Yworld_garry · 10 марта 2011, 20:22:07

Макар, Про какие две говорим?
А прочитал что там у тебя в темя описано по ссылке

Для всех.
Если ставите моды или хаки и тд и тп использующие jQuery, убедитесь что не подключаете два раза библиотеку.
Если появляется конфликт(что то перестает работать), сделайте как описано выше в последнем добавленном скрипте. jQuery может конфликтовать с другими библиотеками.

Макар · 10 марта 2011, 20:49:31

смотри jQuery min вызывается два раза
будет dquote еще и третий раз вызовется

получается чуть ошибся , не из за цитирования а из за соц закладок конфликт

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

Ломака · 10 марта 2011, 21:04:23

Готово, кеш почистил. Все-таки решил не морочаться, снес социалки, один черт толку с них нет

Yworld_garry · 10 марта 2011, 21:04:56

Дык попробуйте как выше написали.

В скрипт стерлки

Цитироватьvar $j = jQuery.noConflict();
var s = $j;

И заменить все $ на $j
Хотя возможно переменную можно и не объявлять, стоит проверить.

Тогда и закладки будут на месте.

Ломака · 10 марта 2011, 21:17:15

Хм, все вроде работает, но осел где-то видит ошибки на странице. Пойду за сигаретами, потом поковыряю.

Drakonsa · 10 марта 2011, 23:48:42

Цитата: Yworld_garry от 10 марта 2011, 18:30:30
На сайте Ломака, крутим вниз и справа появится.
http://www.my-lenovo.ru/

Крутил, вертел, шарился по сайту... Не нашел О_о

Ломака · 11 марта 2011, 00:10:45

Странно...

Yworld_garry · 11 марта 2011, 00:13:09

Все работает насколько я вижу.

Макар · 11 марта 2011, 00:21:33

ага и в темах заработало

digger® · 11 марта 2011, 00:22:17

В Опере не работает.

Ломака · 11 марта 2011, 00:23:15

Цитата: digger от 11 марта 2011, 00:22:17
В Опере не работает.

Как-раз пару минут назад заметил, копаюсь, по идее есть решение...

nsevgeniy · 26 февраля 2012, 20:07:26

Добрый день.

После вставки в файл /Themes/default(либо ваша тема)/index.template.php блока div для вызова кнопки происходит значительное увеличение размера шрифта названия разделов, подразделов и их описаний.

Код Выделить

echo '<div style="opacity: 0.8; position: absolute; top: 456px; right: 0px; display:none;" class="scroll-to-top-button"></div>';

Подскажите, как вернуть прежний размер по умолчанию?

ps: кнопка появляется и работает.

Mavn · 26 февраля 2012, 23:37:10

Цитата: nsevgeniy от 26 февраля 2012, 20:07:26
Добрый день.

После вставки в файл /Themes/default(либо ваша тема)/index.template.php блока div для вызова кнопки происходит значительное увеличение размера шрифта названия разделов, подразделов и их описаний.

Код Выделить Развернуть
echo '<div style="opacity: 0.8; position: absolute; top: 456px; right: 0px; display:none;" class="scroll-to-top-button"></div>';

Подскажите, как вернуть прежний размер по умолчанию?

ps: кнопка появляется и работает.

редактируйте файлы NotePad++ никогда не используйте стандартный блокнот ибо он добавляет к файлам сигнатуру BOM из за чего и возникает проблема

nsevgeniy · 28 февраля 2012, 10:58:58

Цитата: Mavn от 26 февраля 2012, 23:37:10редактируйте файлы NotePad++ никогда не используйте стандартный блокнот ибо он добавляет к файлам сигнатуру BOM из за чего и возникает проблема

Редактирую в NotePad++ и с кодировкой все в порядке (см. вложение).
Может я не в то место блок div вставляю?? Хотя рекомендовано в любое...

update. Первично файл был с кодировкой ANSI. Преобразовал в UTF-8 без BOM. Но после сохранения и повторного открытия кодировка вновь ANSI. Совсем запутался... Причем это происходит с любым файлом php.

update2. Вопрос решен. Вставил блок внутрь конструкции "function template_html_above()", очистил кэш гуглохрома и всё наладилось...