Плавный вариант с затуханием.
Код:
<!--кнопки вверх вниз--> <div class="go-up" id='ToTop'><img src="ссылка на кнопку ВВЕРХ" border="0" width=100%/></div> <div class="go-down" id='OnBottom'><img src="ссылка на кнопку ВНИЗ" border="0" width=100%/></div> <style> .go-up,.go-down { display:none; position:fixed; /*позиционируем*/ right:5px; /*указываем положение, если слева - left*/ z-index:9999; /*показываем поверх все элементов на странице*/ cursor:pointer; opacity:.7; /*прозрачность*/ margin-bottom:5px; /*отступ снизу (можно не указывать)*/ width:30px; /*ширина кнопки*/ height:30px; /*высота кнопки*/ } .go-up { bottom:65px; /*положение от низа окна браузера верхняя кнопка*/ } .go-down { bottom:25px; /*положение от низа окна браузера нижняя кнопка кнопка*/ } .go-down:hover,.go-up:hover { opacity:1; } </style> <script type="text/javascript"> $(function(){ if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow") else $("#ToTop").fadeIn("slow") }); if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow") $(window).scroll(function(){ if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow") else $("#OnBottom").fadeIn("slow") }); $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")}) $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")}) }); </script>