Скролинг страницы вверх и вниз по клику на кнопку

Данный скрипт позволяет плавно прокручивать страницу вверх и вниз по клику на соответствующие кнопки. Эти кнопки располагаются, для удобства, в левом нажнем углу монитора, но по желанию их можно зафиксировать в любом другом месте.

Кнопки имеют нейтральный дизайн, и подойдут к любому сайту. Чтобы не отвлекать посетителя от прочтения статьи, — кнопки при скроллинге страницы становятся прозрачными.

Подключается данный скрипт строго после бибилиотеки 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);
}