Хук "Кнопка наверх"

Posted 24 августа, 201212 yr

Интересует хук кнопки наверх, для возвращения к верху страницы. Нужна на jQuery с плавной прокруткой, никак не подружу IPB с jQuery noconflict :D

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/

Share on other sites

25 августа, 201212 yr

comment_9257

JQuery не поддерживается IP.Board и никак подключить его нельзя.

Хук

Цитата

YOLO
1

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=9257

Share on other sites

14 сентября, 201311 yr

comment_43685

ребята, может кто подскажет как реализовать вот этои кнопочки "наверх" и "вниз", очень бы хотелось иметь такое..!
интересует подробное описание: путь к файлам и возможность подключения кодов.
автор утверждает что можно поставить на любой движок.

__magentawave.com/2013/01/scroll-page-up-and-down.html

модератор, если я что-то нарушил, указывая ссылку на другой ресурс - отредактируйте пожалуйста.

Edited 14 сентября, 201311 yr by WOLF

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=43685

Share on other sites

19 сентября, 201311 yr

comment_44085

JQuery не поддерживается IP.Board и никак подключить его нельзя.

У себя подключил JQuery и зафигачил кнопку наверх.

ipb 345

Global Templates -> 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>

И в ipb_styles.css у меня (правим под свое усмотрение)

/*кнопка вверх*/
a.scrollTop{
background: transparent url(путь до какртинки/стрелка.png') no-repeat center 50px;
display:block; width:5%; height:100%;
position:fixed; top:0px; left:0px;z-index:2000;
}
a.scrollTop:hover{opacity: 0.8;filter: alpha(opacity=80);}
/*-*/

ребята, может кто подскажет как реализовать вот этои кнопочки "наверх" и "вниз", очень бы хотелось иметь такое..! интересует подробное описание: путь к файлам и возможность подключения кодов.

там подробно описано, в принципе тоже самое, только не указали, что вначале надо jquery подключить.

Цитата

DubininAlex, Lordbl4 and Bichugan
3

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44085

Share on other sites

19 сентября, 201311 yr

comment_44087

забыл. В глобальный шаблон надо где нибудь поcле body добавить

Edited 19 сентября, 201311 yr by kgb

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44087

Share on other sites

23 сентября, 201311 yr

comment_44282

kgb, вот спасибки тебе добрый человек..!)) :yahoo: :dance: :good:

рано обрадовался.. что то не идёт у меня! не стукните в скайп если не трудно..! Skype: kolyan1972

или прикрепить свои файлы..

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44282

Share on other sites

24 сентября, 201311 yr

comment_44348

АЦ>Внешний вид>Мой стиль

1) первый код прописал в Global Templates после </head>
2) второй вставил в ipb_styles.css вниз перед /* Skin by www.ipbforumskins.com */
3) опять в Global Templates после </body>

путь к картинке прописал public/style_images/Snapshot/ups.png

ничего не появляется, что сделал не так?

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44348

Share on other sites

24 сентября, 201311 yr

comment_44349

АЦ>Внешний вид>Мой стиль

1) первый код прописал в Global Templates после </head>

2) второй вставил в ipb_styles.css вниз перед /* Skin by www.ipbforumskins.com */

3) опять в Global Templates после </body>

путь к картинке прописал public/style_images/Snapshot/ups.png

ничего не появляется, что сделал не так?

дай ссылку на форум посмотреть

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44349

Share on other sites

24 сентября, 201311 yr

comment_44350

<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вверх (Test-Templates)
// 1.0

jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 40px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▲ Вверх</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 100);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>

globalTemplate

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44350

Share on other sites

24 сентября, 201311 yr

comment_44351

отправил в личку!

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44351

Share on other sites

24 сентября, 201311 yr

comment_44352

во первых у тебя уже есть кнопка вверх, внизу форума, почему бы тебе не сделать ее копию с другим css?

JQuery не поддерживается IP.Board и никак подключить его нельзя.
Хук

Вы че тут рассказываете Все поддерживается, просто он работает в noconflict с другими идентификаторами.

Вот слева видите кнопку вверх, она на Jquery работает

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44352

Share on other sites

24 сентября, 201311 yr

comment_44353

да верно, стандартная кнопка имеется, я имел ввиду появляющаяся кнопка наверх после определённой прокрутки страницы.. там даже я ссылку на пример давал.

Цитата

Link to comment

https://ipbmafia.ru/topic/1543-huk-knopka-naverh/?&do=findComment&comment=44353

Share on other sites

24 сентября, 201311 yr

comment_44355

<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вверх (Test-Templates)
// 1.0

jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 40px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▲ Вверх</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 100);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>

Sign In

Хук "Кнопка наверх"

Featured Replies

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search