<div id="top"></div> <!--это вверху страницы-->  
  <div id="message"><a href="#top" id="top-link">Подняться вверх</a></div> <!--это вниз-->

<style>  
.container {padding: 0 0 70px 0;} /* отступ снизу */  

#message  
{  
display: block;  
display: none;  

/* ссылка над всеми элементами */  
z-index: 999;  

/* ссылка не заслоняет полностью текст под ней */  
opacity: .8;  

/* ссылка всегда на одном и том же месте */  
position: fixed;  

/* ссылка внизу страницы */  
top: 100%;  
margin-top: -80px; /* = height + preferred bottom margin */  

/* ссылка по центру */  
left: 80%;  
margin-left: -80px;  

/* закругленные углы */  
-moz-border-radius: 24px;  
-webkit-border-radius: 24px;  

/* ссылка большая, заметная и ее легко найти */  
width: 300px;  
line-height: 48px;  
height: 48px;  
padding: 10px;  
background-color: #000;  
font-size: 24px;  
text-align: center;  
}  

#message a { color: #fff; }  
</style>

<script type="text/javascript" charset="utf-8">  
$(function () { // run this code on page load (AKA DOM load)  

var scroll_timer;  
var displayed = false;  
var $message = $('#message');  
var $window = $(window);  
var top = $(document.body).children(0).position().top;  

$window.scroll(function () {  
window.clearTimeout(scroll_timer);  
scroll_timer = window.setTimeout(function () {  
if($window.scrollTop() <= top)  
{  
displayed = false;  
$message.fadeOut(500);  
}  
else if(displayed == false)  
{  
displayed = true;  
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });  
}  
}, 100);  
});  
$('#top-link').click(function(e) {  
e.preventDefault();  
$.scrollTo(0,300);  
});  
});  
</script>