Данный скрипт позволяет плавно прокручивать страницу вверх и вниз по клику на соответствующие кнопки. Эти кнопки располагаются, для удобства, в левом нажнем углу монитора, но по желанию их можно зафиксировать в любом другом месте.
Кнопки имеют нейтральный дизайн, и подойдут к любому сайту. Чтобы не отвлекать посетителя от прочтения статьи, — кнопки при скроллинге страницы становятся прозрачными.
Подключается данный скрипт строго после бибилиотеки jQuery, как показано ниже.
<script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $(function() { var $elem = $('#content'); $('#nav_up').fadeIn('slow'); $('#nav_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#nav_up,#nav_down').stop().animate({'opacity':'1'}); }); $('#nav_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#nav_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } ); }); </script>
Оборачиваем свой контент на сайте в DIV с id = content и добавляем наши кнопки:
<div id="content" class="content">тут статья</div> <div style="display:none;" class="nav_up" id="nav_up"></div> <!-- кнопка вверх--> <div style="display:none;" class="nav_down" id="nav_down"></div> <!-- кнопка вниз-->
Осталось навести красоту и прописать CSS оформление:
.nav_up{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(../images/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:30px; white-space:nowrap; cursor: pointer; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .nav_down{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(../images/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:70px; white-space:nowrap; cursor: pointer; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }