Кнопка наверх
HTML
<div id="content">Content</div>
<div id="footer">Footer</div>
CSS
#footer {
height:170px;
background-color: red;
}
#toTop {
background-color: #0A3C5A;
border: 1px solid #D11A10;
color: #FFFFFF;
cursor: pointer;
font-size: 16px;
padding: 2px 10px;
position: fixed;
right: 30px;
display:none;
}
#content {
height: 1000px;
}
JavaScript
jQuery(function(f){
var el = {
div: {},
create: function () {
this.div = f('<div>', {
id: 'toTop',
text: '↑ наверх',
click: function () {
f('body, html').animate({
scrollTop: 0
}, 800);
}
}).appendTo('body');
},
bottom: function (a) {
var b = f('#footer').offset().top,
c = f(window).height();
this.div[ 'fade' + (a ? 'In':'Out')]();
this.div.css({ bottom: b < a + c - 80 ? a + c - b : 80});
}
};
el.create();
f(window).bind('scroll resize', function () {
el.bottom(f(this).scrollTop());
});
});