Кнопка наверх для сайта (почти как вконтакте)

кнопка наверх

кнопка наверх для сайта

Наверняка вы видели подобные кнопки на многих сайтах. Довольно удобная штука, стоит заметить, избавляет от скроллинга многокилометрового документа наверх. Решил сделать нечто подобное.

Логика работы скрипта очень простая — в самом низу страницы помещаем невидимый блок. Как только происходит скроллинг — этот блок становится полупрозрачным, а при клике по нему перемещаемся наверх страницы. Можно было бы задействовать любой из 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>

и все должно заработать :)

Вы можете скачать архив с файлами, или посмотреть как это работает.

Метки: , , , ,

Похожие записи
Запись опубликована в рубрике Javascript, Программирование с метками , , , , . Добавьте в закладки постоянную ссылку.

12 комментариев: Кнопка наверх для сайта (почти как вконтакте)

  1. Slicks говорит:

    Благодарю. Очень полезная вещь.
    Исправил немного css стиль, чтобы полоска была не горизонтально ориентирована, а вертикально как на сайте Вконтакте. Думаю, так будет проще посетителям, которые немало времени проводят в этой социалке и уже привыкли к такой полосе прокрутки.
    Ещё осталось немного допились css стиль и будет идеальною

    Ну а в целом Ваш скрипт работает замечательно! Спасибо

  2. skiff говорит:

    Все работает хорошо.
    Но как сделать так, что бы кнопка появлялась не сразу, а при прокрутке определенного количества пикселей?

    • kumatoz говорит:

      Приветствую. Спасибо, что заглянули )
      Все довольно просто — в 10-й строке скрипта вместо if(scrolled) нужно указать if(scrolled>=300) — в этом случае кнопка появится при прокрутке на 300 и более пикселей.

  3. Дмитрий К31 (Польза) говорит:

    В какой файл темы шаблона вставлять javascript?
    Между тегами какого файла вставлять ВВЕРХ? (Хедера, футера)
    Ну а стили вставляем в сss, да?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>