Scroll To Top 1.0.1

[_Dark_]

Название: Scroll To Top 1.0.1

Добавил: _Dark_

Добавлен: 25 Авг 2012

Категория: Хуки IP.Board 3.3.x

Название по-русски : Плавная прокрутка вверх

Хук заменяет стандартную кнопку Вверх, внизу страницы, на такую же, но с эффектом плавной прокрутки.

Работоспособность проверена во всех популярных браузерах.

[Kinkl]

А есть такой хук, только чтобы кнопка была сбоку, и появлялась-исчезала при прокрутке страницы? Где-то видел такое, но уже и не вспомню.

[Respected]

Такая тенденция замечена на многих зарубежных сайтах на wordpress. Как раз хочу прикрутить данную функцию к своему новому проекту. Как прикручу - отпишусь.

[Kinkl]

Спасибо, буду ждать На мой взгляд довольно полезная и нужная вещь.

[Kinkl]

Подниму тему. Respected, не получилось реализовать еще?

[Mercurial]

Можно скриптик написать... вот сам щас обдумываю как подкрутить себе на форум, в темах у меня он есть под Аватаром.. а вот в других приложениях нет( Пока в раздумьях.

[Respected]

Завтра напишу инструкцию, если время свободное будет  

[jack007]

А есть такой хук, только чтобы кнопка была сбоку, и появлялась-исчезала при прокрутке страницы? Где-то видел такое, но уже и не вспомню.

Это на  XenForo

[by css-servera]

на dle у меня было тоже и есть

[jakondo]

Завтра напишу инструкцию, если время свободное будет

напиши, очень надо

[jakondo]

Живые есть ? 

[Bichugan]

с недавнего времени перестала всплывать  плавающая кнопка...

[nrj45]

Завтра напишу инструкцию, если время свободное будет

что то забросил и не пишешь :9

[maltsme]

Шеф, ну выложи гайдик про то как сделал себе чудо кнопочку. Спасибо.

[WOLF]

'?do=embed' frameborder='0' data-embedContent>>

[maltsme]

Да не, это не то. Я хотел как здесь, и у меня получилось сделать самостоятельно, правда пришлось в коде полазить и стили посмотреть.

 

Внешний вид => Ваш шаблон => Глобальные шаблоны => includeJS

<if test="minifyjs:|:$this->settings['use_minify']">
<if test="remoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<script type='text/javascript' src='<if test="usehttpsscriptaculous:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;g=js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&amp;charset={$this->settings['gb_char_set']}&amp;f={parse expression="PUBLIC_DIRECTORY"}/js/ipb.js,cache/lang_cache/{$this->lang->lang_id}/ipb.lang.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.hovercard.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.quickpm.js<if test="hasjsmodules:|:count($jsModules)">,{parse expression="PUBLIC_DIRECTORY"}/js/ips.{parse expression="implode('.js,' . PUBLIC_DIRECTORY . '/js/ips.', array_unique( array_keys( $jsModules ) ) )"}.js</if>' charset='{$this->settings['gb_char_set']}'></script>
<else />
<if test="nominifyremoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<else />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/prototype.js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}js/ipb.js?ipbv={$this->registry->output->antiCacheHash}&amp;load=quickpm,hovercard,{parse expression="implode(',', array_unique( array_keys( $jsModules ) ) )"}'></script>
<if test="nominifyremoteloadjs2:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpss:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/scriptaculous/scriptaculous-cache.js'></script>
</if>
<script type="text/javascript" src='{$this->settings['cache_dir']}lang_cache/{$this->lang->lang_id}/ipb.lang.js?nck={$this->settings['noCacheKey']}' charset='{$this->settings['gb_char_set']}'></script>
</if>
{parse template="liveEditJs" group="global"}
<if test="isLargeTouch:|:$this->registry->output->isLargeTouchDevice()">
<script type="text/javascript" src='{$this->settings['js_base_url']}js/3rd_party/iscroll/iscroll.js'></script>
</if>


<script type="text/javascript">
<!--
(function($){
$(function(){var e = $(".scrollTop");
var speed = 500;
e.click(function(){
$("html:not(:animated), body:not(:animated)").animate({ scrollTop: 0}, speed);
return false; 
   });


function show_scrollTop(){
($(window).scrollTop()>250 )?e.fadeIn(1000):e.hide();
}
$(window).scroll( function(){show_scrollTop()} ); 
show_scrollTop();
});
})(jQuery)
//-->
</script>

Теперь в globalTemplate после </head>

<div class="scrollTop" style="display: block;"><div class="scrollTop__side"></div><div class="scrollTop__arrow"></div></div>

ну и ipb_styles.css

.scrollTop {
display: none;
position: fixed;
width: 3%;
top: 0;
left: 0;
height: 100%;
z-index: 9000;
cursor: pointer;
}
.scrollTop__side {
position: fixed;
width: 3%;
height: 100%;
top: 0;
left: 0;
background: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0.2);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
.scrollTop__arrow {
position: fixed;
width: 3%;
height: 100%;
top: 50px;
left: 0;
background: url(путь к файлу/стрелка.png) top no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)";
filter: alpha(opacity=0.4);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}

У меня теперь идентично тому как здесь с лева, можно конечно в стилях поковыряться, но задача выполнена. Спасибо  title="">__ipbmafia.ru

[maltsme]

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

[mistudioru]

А с 3.4.6 работать будет?

[WOLF]

А с 3.4.6 работать будет?

установите и посмотрите

[maltsme]

У меня с 3.4.7 работает