кнопка наверх для сайта
Наверняка вы видели подобные кнопки на многих сайтах. Довольно удобная штука, стоит заметить, избавляет от скроллинга многокилометрового документа наверх. Решил сделать нечто подобное.
Логика работы скрипта очень простая — в самом низу страницы помещаем невидимый блок. Как только происходит скроллинг — этот блок становится полупрозрачным, а при клике по нему перемещаемся наверх страницы. Можно было бы задействовать любой из 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>
и все должно заработать 🙂
Вы можете скачать архив с файлами, или посмотреть как это работает.
Похожие записи
12 комментариев: Кнопка наверх для сайта (почти как вконтакте)