кнопка наверх для сайта
Наверняка вы видели подобные кнопки на многих сайтах. Довольно удобная штука, стоит заметить, избавляет от скроллинга многокилометрового документа наверх. Решил сделать нечто подобное.
Логика работы скрипта очень простая — в самом низу страницы помещаем невидимый блок. Как только происходит скроллинг — этот блок становится полупрозрачным, а при клике по нему перемещаемся наверх страницы. Можно было бы задействовать любой из js фрейморков типа jQuery, но на мой взгляд для решения поставленной задачи это нелогично.
Итак, наш javascript будет выглядит вот так:
function init(){
var d = document.getElementById("showScroll");
d.onclick=function(){
window.scrollTo(0,0);
}
}
window.onscroll = function() {
var d = document.getElementById("showScroll");
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if(scrolled){
d.style.display='block';
}
else{
d.style.display='none';
}
}
window.onload = init;
Теперь разберемся со стилями. У меня они выглядят таким образом:
body{
font-family: Arial, sans-serif;
font-size: 18px;
background: url(bg.jpg);
}
#showScroll{
position:fixed;
bottom:0px;
width:100%;
margin:0px auto;
height:30px;
background:#aaa;
display:none;
opacity: 0.3;
filter: alpha(opacity=30);
}
#cur{
margin:0 auto;
width:100px;
font-size:26px;
font-family: Arial, sans-serif;
color:blue;
}
#showScroll:hover{
opacity: 0.7;
filter: alpha(opacity=70);
}
Осталось в вашем документе вставить в любом месте между тегами <body></body> вот такую конструкцию
<div id="showScroll"><div id="cur">ВВЕРХ</div></div>
и все должно заработать 
Вы можете скачать архив с файлами, или посмотреть как это работает.
Похожие записи
Благодарю. Очень полезная вещь.
Исправил немного css стиль, чтобы полоска была не горизонтально ориентирована, а вертикально как на сайте Вконтакте. Думаю, так будет проще посетителям, которые немало времени проводят в этой социалке и уже привыкли к такой полосе прокрутки.
Ещё осталось немного допились css стиль и будет идеальною
Ну а в целом Ваш скрипт работает замечательно! Спасибо
Изначально сделано было так, чтоб каждый мог впоследствии допилить под себя. У Вас на сайте хорошо получилось
Может поделитесь?)
Да там все элементарно
Вот так выглядит, а вот архив.
Все работает хорошо.
Но как сделать так, что бы кнопка появлялась не сразу, а при прокрутке определенного количества пикселей?
Приветствую. Спасибо, что заглянули )
Все довольно просто — в 10-й строке скрипта вместо if(scrolled) нужно указать if(scrolled>=300) — в этом случае кнопка появится при прокрутке на 300 и более пикселей.
В какой файл темы шаблона вставлять javascript?
Между тегами какого файла вставлять ВВЕРХ? (Хедера, футера)
Ну а стили вставляем в сss, да?
js и css нужно вставить в header.php, между тегами head и /head
Контейнер с надписью вверх тоже лучше вставить в header.php сразу после тега body
Выполнил все как рекомендовали — кнопка не выводится. (Более того, код javascript отображается [виден] вверху header’а).
Адрес сайта можно?
Сайт Молекула Пользы —
Но, я уже успел удали добавленные коды.
Дмитрий, свяжитесь со мной через ICQ 283-772-679 или Skype alexkumatoz.