Вариант 1- (вставлять нужно в HTML код страниц)
[code]<SCRIPT src="http://bambun.ru/css_js/strelka_exe.js" type="text/javascript" language="javascript"></SCRIPT>
<a id="gotop" class="scrollTop" href="#" onclick="top.goTop();
return false;" style="text-align: justify;"><script
src="http://xall-pc.ru/up.js"
type="text/javascript"></script></a>
<style type="text/css">
.scrollTop{
background:url(http://bambun.ru/images/up.png) 0 0 no-repeat;
display:block; width:32px; height:32px;
position:fixed; bottom:10px; right:1%;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
</style>[/code]
Вариант 2 - (вставлять нужно в HTML код страниц)
<div style="position: fixed; right: 0.5%; bottom: 45%;"><a title="В верх страницы" onclick="scrollTo(0,0); return false;" href="#top"><img alt="В верх страницы" src="http://r28.imgfast.net/users/2814/33/31/58/album/dsdddd10.png"></a><br><br><a title="В низ страницы" onclick="scrollTo(0, document.body.scrollHeight); return false;" href="#top"><img alt="В низ страницы" src="http://r28.imgfast.net/users/2814/33/31/58/album/dsdddd11.png"></a> </div>
Вариант 3 (Сложный)
Шаг 1 Вставка кнопки вверх / наверх страницы Кнопка будет работать как ссылка наверх страницы, для этого в самый низ кода шаблона, перед закрывающим тегом </body> ставим следующий код: <a href="#" id="toTop"><img src=http://ageta.ru/images/up1.png border="0" align="absmiddle" /></a>
<script src="http://ageta.ru/js/toTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script> Данный
текст необходимо, чтобы был на каждой странице вашего сайта, он
вызывает скрипт кнопки вверх и присваивает картинку. Если у вас
динамический сайт (все CMS, такие как Joomla, WordPress, Drupal и другие
CMS являются динамическими, то есть страница формируется в момент
обращения к ней), то целесообразно разместить в шаблоне, если вы
используете на сайте несколько шаблонов, то тогда во всех используемых
шаблонах, а то в противном случае, в шаблонах которых вы не указали не
будет этой кнопки. Для кнопки вверх Joomla Вставить
в файл index.php, который находиться ваш_сайт/templates/ваша_тема между
тегами <body></body>, я в основном вставляю прядо перед
тегом </body> Для кнопки вверх WordPress В
административной панели, справа в разделе "Внешний вид”->”Редактор”,
в файле footer.php между тегами <body></body>, я в основном
вставляю прядо перед тегом </body>
Кнопка вверх для UCOZ В редактировании шаблона (Управление дизайном -- Нижняя часть) в самый низ кода перед закрывающим тегом </body> Для других CMS и статических сайтов Если
вы уже вставляли счетчики Яндекс Метрика, LiveInternet, то этот код
необходимо вставить в тоже место, куда вы и вставляли код для счетчиков.
В основном это файлы index.html, index.php шаблонов. Если у вас
статический не на cms, то необходимо прописать в каждой странице. Шаг 2 Задать стили для кнопки Вверх / Наверх страницы Необходимо будет создать стили и расположение кнопки наверх. Для этого вам необходимо будет скопировать следующий текст: #toTop {
position: fixed;
bottom: 20px;
right: 2px;
background: none;
cursor: pointer;} Их
необходимо скопировать туда, где у вас располагаются CSS стили, в
основном это файлы с расширением CSS. Какие именно файлы для ряда CMS
читайте ниже. Эти данные можно менять, тем самым меняя оформление кнопки наверх, но об этом поговорим попозже.
Кнопка наверх для Joomla Вставляем
в ваш_сайт/templates/ваша_тема/CSS файлов там с расширением css может
быть много, скорее всего это template.css или general.css. Кнопка наверх для WordPress Скопировать
этот текст в самый низ файла wp-content/themes/ваша_тема/style.css или
через административную панель, справа в разделе "Внешний
вид”->”Редактор”, файл style.css.
Кнопка наверх для Ucoz Вставить в низ в Управление дизайном сайта -- Таблица стилей (CSS) Для других CMS и статических сайтов Там где задаются стили для вашей страницы, вставить этот код. Шаг 3 Сохранить картинку и скрипт Подобрать и сохранить на сайте картинку Необходимо
сохранить на вашем сайте в папке где хранятся у вас картинки и сменить
мой адрес img src=http://ageta.ru/images/up1.png. Также можете залить на
файлообменник картинку, только в этом случае, если картинка удалиться,
то вы потеряете свою кнопку. А точнее ее изображение. Набор картинок для
кнопки наверх я расположил ниже в этой странице. Скачать скрипт Путь наверх будет прокладываться скриптом, который вы можете получить двумя способами: Вариант 1 Скачать для кнопки вверх скрипт Вариант 2 Можете создать файл TXT, открыть блокнотом, внести в него следующий текст: $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var
scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html,
body").animate({scrollTop:0},"slow")})}}); Сохранить и сменить имя и расширение на toTop.js. Этот скрипт кнопки наверх прячет ее, когда вы находитесь вверху страницы и показывает, когда вы начинаете опускаться вниз. Также этот скрипт наверх,
задает скорость прокрутки страницы. Его необходимо загрузить на свой
сайт, в произвольную директорию. И сменить на шаге 1 мой адрес
"http://ageta.ru/js/toTop.js” на свой для для кнопки наверх javascript. Шаг 4 Подключить jQuery На
многих сайтах, этот скрипт не будет плавно переносить вверх, а просто
будет добавлять "#” и перезагружать сайт, это потому, что jQuery не
подключен. Его необходимо подключить. У некоторых, у кого на сайте
работает уже что то, на jQuery, то наверняка он уже подключен и не стоит
заново подключать. Чтобы подключить jQuery к сайту, необходимо выполнить следующие действия: - Открываете в текстовом редакторе (я использую Notepad+) для редактирования:
- Для Joomla, тот же файл, который правили на шаге 1
- Для WordPress, в редакторе шаблона файл header.php используемой темы
- Для Ucoz, По умолчанию на каждом uCoz-сайте уже подключена jQuery-библиотека, подключается она всегда перед тегом </head> или после </title> в виде отдельного файла, повторное подключение jQuery может привести к некоторым проблемам.
- Для других CMS и статических сайтов, если
сайт статический (не используется ни какая CMS - движок) - поочередно
все страницы сайта, для динамических сайтов на других CMS - ту часть шаблона (темы) где расположена секция HEAD
- Находите секцию HEAD - все что находится между открывающим и закрывающим тегами: <HEAD>...</HEAD>.
- И добавляете в самый ее конец, перед закрывающим тегом </HEAD> следующий код:
Вариант 1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
В данном случае он подключает jquery с google, если вы не хотите использовать со стороннего ресурса, то используйте второй способ. Вариант 2 Вам необходимо скачать JQuery с сайта производителя,
если браузер не скачивает этот файл, то после его открытия можете его
сохранить как. Закачиваем файл скрипта на ваш сайт и прописываем к нему
путь <script src="http://ageta.ru/templates/beez_20/js/jquery-1.7.2.min.js"></script> Смените адрес к своему скрипту и обязательно, чтобы начинался с http:// Как сделать вместо картинки текст для кнопки Вверх / Наверх? Для этого вам необходимо будет сделать следующее: Строку: <a href="#" id="toTop"><img src="http://ageta.tk/images/up1.png" border="0" align="absmiddle" /></a> Замените на: <a href="#" id="toTop">Наверх</a> И изменить CSS на: #toTop { width: 89px; height: 24px; background: #D9DAEE; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: fixed; bottom: 30px; right: 2px; text-align: center; text-decoration: none; font-size: 12pt; color: #1A2534; cursor: pointer;} Текст
может быть различный, но я предложу несколько вариантов "Вверх”,
"Наверх”, можете также добавить символы, показывающие вверх "^ ▲ ♂ ꜛ ↑ ᴧ
٨ Λ ˄”. С помощью CSS вы можете сделать различный дизайн кнопки,
добавить тень, сделать округлой или наоборот прямоугольной, поиграть
цветом текста и фона. Важно! Если у
вас выводятся иероглифы, вместо русских букв Наверх, то вам необходимо
сохранить файл в кодировке UTF-8 без BOM, тогда у вас выведется
корректно русский язык. 
Набор картинок для кнопок Вверх, Наверх страницы Стрелка наверх
может выглядеть по-разному. Я решил Вам немного упростить работу и
подобрал картинки, перевел их в формат PNG, вырезал фон, чтобы они
прозрачны были по контору. Сделал размер максимум 80px, больше вам думаю
не понадобиться.                    
Можете
спокойно ими пользоваться. Редактируйте: меняйте цвет, размер,
добавляйте фон и текст. Для того, чтобы скачать их, наведите на
понравившуюся картинку и нажмите правую кнопку мышки и выберете
сохранить картинку. В стилях CSS помните, что лучше поставьте габариты
картинки, чтобы область нажатия на кнопку соответствовали габаритам и
картинка не съезжала. Выкладывайте в комментариях разные картинки на
кнопку вверх / наверх, желательно в PNG. Как можно изменить отображение кнопки на странице Поизучаем немного CSS. Что для чего нужно, чтобы изменить отображение кнопки вверх страницы CSS стиль для картинки #toTop {
position: fixed; /* зафиксировать позицию кнопки на окне браузера, а не
на странице сайта. Обязательна, чтобы кнопка не перемещалась со
страницей, при прокрутке */
bottom: 20px; /* отступ от нижнего края на верх станицы */
right: 2px; /* отступ от правого края на лево */
background: none; /* задаем, что фона нет, в противном случае, если не
зададим при наведении будет выделять картинку, при условии что картинка
формата PNG/GIF с прозрачными областями. Если хотите сделать фон, то
возьмите параметры из примера ниже */
cursor: pointer;} /*
при наведении на данную кнопку меняется курсор на "Рука-указатель”,
свидетельствующая о том, что это кнопка */ CSS стиль для текста #toTop { параметры кнопки width:
89px; /* ширина кнопки, если вы используете картинку, то целесообразно
сделать размеры по картинке или более, если хотите как то обыграть
картинку фоном */ height: 24px; /* высота кнопки */ background:
#D9DAEE; /* цвет заливки кнопки, если хотите вставить фоном картинку,
то можете использовать "background-image: url('/images/sun.gif');”, код
цвета можете посмотреть через графические редакторы, к примеру Фотошоп, а
какому коду соответствует цвет можете посмотреть на сайте http://rgbcolors.ru */ скругление углов кнопки -moz-border-radius:
50px; /* скругление всех углов для браузеров FireFox. Это свойство
идентично по назначению свойству border-radius, было введено в
одностороннем порядке браузером Fire Fox и поддерживается только им. */ -webkit-border-radius:
50px; /* скругление всех углов для браузеров Safari и Chrome. Это
нестандартное CSS свойство, аналогичное по назначению свойству
border-radius */ border-radius: 50px; /* закругленность углов
кнопки, согласно правилам CSS 3, но лучше указать все три способа
скругления, чтобы корректно выводилось во всех браузерах. Значения во
всех должны быть одинаковые */ позиция кнопки position:
fixed; /* порядок, в соответствии с которым элемент отображается на
веб-странице, в данном случае зафиксирован на экране, а не на странице,
поэтому он не прокручивается */ bottom: 30px; /* сдвигает нашу
кнопку вверх страницы с нижнего края станицы, если поставите значение
top, то будет наоборот, сверху вниз */ right: 2px; /* отступ влево от правого края страницы, можете сменить на left и будет отступ вправо с левой стороны страницы */ параметры текста text-align: center; /* Выравнивание текста или изображения по центру */ text-decoration:
none; /* согласно моих правил CSS, он воспринимал текст как ссылку и
подчеркивал, я убрал подчеркивание данной функцией */ font-size: 12pt; /* задал размер текста "Наверх” */ color: #1A2534; /* цвет текста */ другое cursor:
pointer;} /* при наведении на кнопку задает вид курсора, в нашем случае
логично курсор "Рука-указатель”, свидетельствующий о том, что мы
подвели курсор именно к кнопке. Думаю целесообразно оставить как есть */ так же можно: background:rgba(255,255,255, 0.2); /* делает прозрачным фон, но цвет необходимо задавать в RGB, можете цвет подобрать через http://www.colorschemer.com/online.html, 0,2 – означает прозрачность 0-полностью прозрачный, 1-не прозрачный */
opacity:0.6; /* если хотите сделать весь элемент прозрачным, то используйте
| 
