<div id="scrollup"><img alt="Прокрутить вверх" src="/img/up.png"></div>
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}
jQuery( document ).ready(function() {
jQuery('#scrollup img').mouseover( function(){
jQuery( this ).animate({opacity: 0.65},100);
}).mouseout( function(){
jQuery( this ).animate({opacity: 1},100);
}).click( function(){
window.scroll(0 ,0);
return false;
});
jQuery(window).scroll(function(){
if ( jQuery(document).scrollTop() > 0 ) {
jQuery('#scrollup').fadeIn('fast');
} else {
jQuery('#scrollup').fadeOut('fast');
}
});
});
jQuery('#scrollup img').mouseover( function(){
jQuery( this ).animate({opacity: 0.65},100);
}).mouseout( function(){
jQuery( this ).animate({opacity: 1},100);
}).click( function(){
window.scroll(0 ,0);
return false;
});
jQuery(window).scroll(function(){
if ( jQuery(document).scrollTop() > 0 ) {
jQuery('#scrollup').fadeIn('fast');
} else {
jQuery('#scrollup').fadeOut('fast');
}
});
});
или
var scrollUp = document.getElementById('scrollup'); // найти элемент
scrollUp.onmouseover = function() { // добавить прозрачность
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() { //убрать прозрачность
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() { //обработка клика
window.scrollTo(0,0);
};
// show button
window.onscroll = function () { // при скролле показывать и прятать блок
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};