xaocZ 21 июл 2012, 14:22

Скрипт стрелок вверх и вниз

Скрипт стрелок вверх и вниз

Перед закрывающим тегом </body> ставим:

Код: Выделить всё

<div style= "position: fixed; right: 1%; bottom: 7%;" id="nav_up"><img src="изображение" alt="Вверх страницы" title="Вверх страницы" border="0"/></div>
<div style= "position: fixed; right: 1%; bottom: 1%;" id="nav_down"><img src="изображение" alt="Вниз страницы " title="Вниз страницы" border="0"/></div>

      <script type="text/javascript">
        jQuery(function() {
            var overelem = jQuery('body');
            
            jQuery('#nav_up').fadeIn('slow');
            jQuery('#nav_down').fadeIn('slow');  
            
            jQuery('#nav_down').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
              }
            );
            jQuery('#nav_up').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: '0px'}, 800);
              }
            );
            });
        </script>
Для изменения картинки перемещения, меняем на свою ссылку (выделено красным):
<img src="изображение" alt="Вверх страницы" title="Вверх страницы" border="0"/>
<img src="изображение" alt="Вверх страницы" title="Вниз страницы " border="0"/>

Например:
Вверх - Изображение
Вниз - Изображение

Для изменения положения на экране, меняем:
<div style= "position:fixed; right: 1%; bottom: 7%;" id="nav_up">
<div style= "position:fixed; right: 1%; bottom: 1%;" id="nav_down">
Проценты у bottom: - это отступ от нижнего края.
Проценты у right: - это отступ от правого края.

Отсупы можно выставить в пикселях - px.

Для изменения стороны (нужно например слева) заменяем right: на left:
Последний раз редактировалось CabinetAdmin 09 авг 2012, 14:20, всего редактировалось 1 раз.
Причина: Добавлено место установки.

xaocZ

  • 0
  • Подписаться на тему
  • В закладки
Комментарии: 21
  • Сначала старые:
    Сначала новые:

CabinetAdmin 24 окт 2012, 19:31 Сообщение

Ещё один небольшой код для стрелок вверх и вниз, для тех у кого уже подключен jQuery.

Открываем overall_footer.html, перед закрывающим тегом </body> ставим:

Код: Выделить всё

<!--Кнопки в верх в низ-->
<div style="position: fixed; right: 0px; bottom: 45%;">
<a href="#top" onclick="jQuery('html, body').animate({scrollTop:0}, 'slow');return false;"><img src="картинка вверх" alt="Вверх страницы" ></a>
<br />
<a href="#bottom" onclick="jQuery('html, body').animate({scrollTop:document.documentElement.scrollHeight}, 'slow');return false;"><img src="картинка вниз" alt="Вниз страницы" ></a>
</div>
Пояснения:
right: 0px; - картинки будут находится на странице справа, для отступа от края меняйте 0 по своему усмотрению. Для установки блока слева, замените на left: 0px;
bottom: 45%; - отступ от нижнего края страницы. При 0% блок с картинками будет прижат к нижнему краю страницы.

Не забудьте установить изображения.
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 апр 2013, 10:10 Сообщение

xaocZ
А можно увеличить скорость? что бы было не плавное, а резкое перенаправления вверх или вниз?
Странно, но стрелки не работают в темах
Ответить
  • 0

CabinetAdmin 10 апр 2013, 14:47 Сообщение

eska писал(а):что бы было не плавное, а резкое перенаправления
Скорость задаётся в скрипте, в двух местах - 800. Первые 800 отвечают за перемотку вниз, вторые соответственно наверх.

Не работать может только из-за того отсутствия библиотеки jQuery. По всей видимости она у вас есть, но прописана не в overall_header.html, а в index_body.html:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Переместите её в хедер перед </head>, будет работать на всех страницах.
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 апр 2013, 14:58 Сообщение

CabinetAdmin
А если просто скопировать, не вырезая?
Ответить
  • 0

CabinetAdmin 10 апр 2013, 16:45 Сообщение

То на главной странице будет две одинаковые библиотеки jQuery...
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 апр 2013, 16:51 Сообщение

CabinetAdmin
Понял, из index_body убрал :)
Ответить
  • 0

Галина 08 май 2013, 18:43 Сообщение

Здравствуйте.
Понимаю, что сделала что-то не то. Помогите разобраться. Закачала картинки вставила скрипт в хидер после

Код: Выделить всё

<head
>, в результате кнопки появились, но, они стоят вместе снизу и к тому же не активны!
Изображение

подскажите пожалуйста, как исправить?
Ответить
  • 0

CabinetAdmin 08 май 2013, 19:17 Сообщение

Галина
А почему после <head>? Вроде как перед </body> надо было...

Если после переноса всё равно не будет работать, подключите библиотеку jQuery, добавив перед </head>:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Галина 08 май 2013, 23:01 Сообщение

CabinetAdmin писал(а):А почему после <head>? Вроде как перед </body> надо было...
Я почему-то не нашла

Код: Выделить всё

</body>
в шаблоне... :( Может быть тогда посмотрите?

Код: Выделить всё

[spoiler=]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

    <div style= "position: fixed; right: 1%; bottom: 1%;" id="nav_down"><img src="http://moimalenkidrug.4adm.ru/storage/moimalenkidrug_4adm_ru/images/2.gif" alt="Вниз страницы " title="Вниз страницы" border="0"/></div>
<div style= "position: fixed; right: 1%; bottom: 10%;" id="nav_up"><img src=" http://moimalenkidrug.4adm.ru/storage/moimalenkidrug_4adm_ru/images/q2.gif" alt="Вверх страницы" title="Вверх страницы" border="0"/></div>

          <script type="text/javascript">
            jQuery(function() {
                var overelem = jQuery('body');
               
                jQuery('#nav_up').fadeIn('slow');
                jQuery('#nav_down').fadeIn('slow'); 
               
                jQuery('#nav_down').click(
                  function (e) {
                      jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
                  }
                );
                jQuery('#nav_up').click(
                  function (e) {
                      jQuery('html, body').animate({scrollTop: '0px'}, 800);
                  }
                );
                });
            </script>


<script type="text/javascript" src="http://moimalenkidrug.4adm.ru/storage/moimalenkidrug_4adm_ru/images/postlink.js"></script>

<link rel="SHORTCUT ICON" href="http://moimalenkidrug.4adm.ru/storage/moimalenkidrug_4adm_ru/images/favicon.ico"> 
<!-- INCLUDE _mg_config.html -->

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- MOD : MSSTI RSS Feeds (V1.2.1) - Start //-->
<!-- IF S_FEEDS -->
<link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {SITENAME}" href="{U_RSS}" />
<!-- IF U_FEEDS_NEWS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWS}" href="{U_FEEDS_NEWS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_NEWPOST --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWPOST}" href="{U_FEEDS_NEWPOST}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUMS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_FORUMS}" href="{U_FEEDS_FORUMS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREADS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_TOPICS}" href="{U_FEEDS_THREADS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_POSTS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_POSTS}" href="{U_FEEDS_POSTS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_ATTACH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_ATTACH}" href="{U_FEEDS_ATTACH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_EGOSEARCH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_YOUR_POSTS}" href="{U_FEEDS_EGOSEARCH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUM --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_FORUM} {FORUM_NAME}" href="{U_FEEDS_FORUM}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREAD --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_TOPIC} {TOPIC_TITLE}" href="{U_FEEDS_THREAD}" /><!-- ENDIF -->
<!-- ENDIF -->
<!-- MOD : MSSTI RSS Feeds (V1.2.1) - End //-->
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript" src="{T_TEMPLATE_PATH}/scripts.js"></script>
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
	return false;
}

function jumpto()
{
	ge = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

	if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0)
	{
		if (base_url.indexOf('?') == -1)
		{
			document.location.href = base_url + '?start=' + ((page - 1) * per_page);
		}
		else
		{
			document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * per_page);
		}
	}
}

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
	var parent = document.getElementById(id);
	if (!parent)
	{
		eval('parent = document.' + id);
	}

	if (!parent)
	{
		return;
	}

	var rb = parent.getElementsByTagName('input');

	for (var r = 0; r < rb.length; r++)
	{
		if (rb[r].name.substr(0, name.length) == name)
		{
			rb[r].checked = state;
		}
	}
}

<!-- IF ._file -->

	/**
	* Play quicktime file by determining it's width/height
	* from the displayed rectangle area
	*
	* Only defined if there is a file block present.
	*/
	function play_qt_file(obj)
	{
		var rectangle = obj.GetRectangle();

		if (rectangle)
		{
			rectangle = rectangle.split(',')
			var x1 = parseInt(rectangle[0]);
			var x2 = parseInt(rectangle[2]);
			var y1 = parseInt(rectangle[1]);
			var y2 = parseInt(rectangle[3]);

			var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
			var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
		}
		else
		{
			var width = 200;
			var height = 0;
		}

		obj.width = width;
		obj.height = height + 16;

		obj.SetControllerVisible(true);

		obj.Play();
	}
<!-- ENDIF -->

// ]]>
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/pngfix.js"></script>
<![endif]-->

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<!-- <div id="wrapper"> -->
<div style="width:{$MG_GLOBAL_WIDTH};clear:both;margin: 0 auto;">
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td class="leftshadow" width="9" valign="top"><img src="{T_THEME_PATH}/images/spacer.gif" alt="" width="9" height="1" /></td>
		<td class="np-body" width="100%" valign="top">

<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1></h1><span class="gen"></span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>

<!-- INCLUDE menu_block.html -->

<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --><span style="color:#CC3333;">{L_BOARD_DISABLED}</span><!-- ENDIF -->


<div id="wrapcentre">

<div align="center"><img src="http://s7.rimg.info/67958c824a323a57c89bc0c35962fe79.gif" ><font color="FFC125"; size="3px"; face="Courier New"><b>Актуальная тема </b></font><a href="http://собакиэлисты.рф/viewtopic.php?f=12&t=573"><font color="FFC125"; size="4px"><b> «28 апреля в Элисте Соревнования собак всех пород» </b></font></a></div>

<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
<div style="margin-top:50px;margin-bottom:50px;text-align:center;clear:both;"><div class="popuppm-new"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div></div>
<!-- ENDIF -->[/spoiler]
Сейчас попробовала поставить то, что Вы дали, но результат такой же. :cry:
Поставила перед

Код: Выделить всё

<td class="np-body" width="100%" valign="top">
ЗАРАБОТАЛО!!! Только я это несколько по-другому представляла. Я думала, что верхняя стрелочка в верхнем углу будет, а они обе постоянно внизу рядом стоят. Нет возможности рассоединить их? :oops:
Ответить
  • 0

silver073000Василий 09 май 2013, 01:03 Сообщение

Порой просто не указывается, какой шаблон править, а просто пишется, что такой-то скрипт поставить перед закрывающим </head>, а такой-то перед </body>, то закрывающий тег </body> пробуйте искать в overall_footer.html, а </head> в overall_header.html, хотя, может, есть и какие-то специфические стили, в которых устроено всё иначе - я не знаю и пусть знатоки стилей подскажут.
Галина писал(а): Я думала, что верхняя стрелочка в верхнем углу будет, а они обе постоянно внизу рядом стоят. Нет возможности рассоединить их? :oops:
В вашем коде

Код: Выделить всё

<div style= "position: fixed; right: 1%; bottom: 10%;" id="nav_up"><img src=" http://moimalenkidrug.4adm.ru/storage/moimalenkidrug_4adm_ru/images/q2.gif" alt="Вверх страницы" title="Вверх страницы" border="0"/></div>
попробуйте поиграть со значением процентов после слова bottom:. Сейчас у вас тут стоит 10%, а попробуйте вписать 90%, например, и понаблюдайте за положением кнопки. Расположение подберите методом экспериментов :)
Ответить
  • 0

CabinetAdmin 09 май 2013, 06:31 Сообщение

BOJIK писал(а):</body> пробуйте искать в overall_footer.html, а </head> в overall_header.html
Всё правильно.
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Галина 09 май 2013, 21:45 Сообщение

BOJIK писал(а):пробуйте искать в overall_footer.html, а </head> в overall_header.html,
Искала, нет тоже... :D
BOJIK писал(а):попробуйте поиграть со значением процентов после слова bottom:. Сейчас у вас тут стоит 10%, а попробуйте вписать 90%, например, и понаблюдайте за положением кнопки. Расположение подберите методом экспериментов :)
Да, спасибо. Я сама додумалась. Очень была удивлена этому! :D

Не знаю, подойдёт ли данная просьба к этой теме, ну, ежели что, админы переместят. :drink:
Помогите пожалуйста сделать вот такую стрелочку только на прозрачном фоне. :oops: В пэинте делала, вроде и в png сохраняла,не получается...
Вот исходник

Изображение

Его ещё нужно уменьшить до такого размера 30х30рх
Изображение
Ответить
  • 0

silver073000Василий 09 май 2013, 23:46 Сообщение

Пеинт примитивненький редактор и он не понимает прозрачности :) Тут нужен фотошоп или редакторы, которые могут сохранять прозрачность. Вот вам пока стрелка 30х30 зелёненькая. Ну а если вам надо перекрасить её, то давайте сделаем так. Создайте в пеинте небольшое изображение и залейте нужным вам цветом, ну а перекрасить эту стрелочку потом не составит труда :) Договор? :)
Изображение
Ответить
  • 0

CabinetAdmin 10 май 2013, 07:24 Сообщение

Галина писал(а):Искала, нет тоже...
Как нету?
</body> находится в самом конце шаблона overall_footer.html перед </html>
</head> находится в середине шаблона overall_header.html перед <body class="{S_CONTENT_DIRECTION}"> или <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">... в зависимости от стиля.
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Вернуться в «JavaScript / jQuery»

Похожие темы