side scroll button

by antouank

HTML

<div id="wrapper">
    <div id="sampleText">Very long div Nulla ac dignissim dolor. Duis faucibus quam augue, luctus facilisis lacus bibendum et. Sed vestibulum purus vitae lectus laoreet, eu dapibus quam adipiscing. Curabitur egestas et tortor in lobortis. Aliquam consectetur mattis nisi at varius. Curabitur sit amet elit eu lorem tempor venenatis vel a nisi. Curabitur condimentum vulputate massa sit amet suscipit. Nunc nec diam dignissim, imperdiet enim nec, ultricies lorem. Proin rhoncus, velit sed varius pulvinar, tellus augue feugiat erat, vel ullamcorper nisi eros vel dolor. Mauris lobortis eu nunc non ultrices. Donec a ante in nisl tempus interdum. Nullam ultricies malesuada urna vel bibendum. Mauris leo magna, scelerisque ut purus quis, aliquam blandit libero. Etiam euismod ante id vulputate consectetur. Phasellus id commodo nisl. Aliquam eget interdum magna. Nunc luctus justo leo, at mollis lacus dictum in. In ut augue interdum, auctor magna in, sagittis ante. Etiam egestas nunc eu orci pulvinar tristique. Cras a metus et arcu mollis posuere. Aliquam et sem gravida lorem cursus condimentum vel ut nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget quam a nibh vehicula ultricies. Donec convallis, ipsum in blandit tempus, est magna ultricies libero, sed porttitor lorem erat in urna. Aliquam mattis eros facilisis metus aliquam venenatis quis non elit. Nam et arcu placerat, pulvinar leo id, dignissim massa. Donec bibendum varius lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at justo sed mi accumsan porttitor. Mauris dui eros, tempus vitae condimentum vel, venenatis sed nunc. Vivamus volutpat vulputate bibendum. Etiam eget lectus in urna mattis viverra. Suspendisse a lacinia nibh. Vivamus sollicitudin pulvinar tortor, et sagittis mauris gravida eu. Integer feugiat, nisi vel luctus dictum, risus urna hendrerit metus, non...

CSS

#wrapper {
    position: relative;
    height: 100%;
    overflow: auto;
}

#sampleText {
    margin: 10px;
}

#rightSide {
    width: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#scrollerDiv {
    display: none;
    width: 50px;
    color: #ddd;
    background-color: #444;
    border-radius: 4px;
    padding: 8px;
    opacity: 0.8;
    position: relative;
    margin-left: 30px;
    transition: all 0.2s ease-out;
    cursor: default;
}

JavaScript

$(function () {
    var $rightSide = $('#rightSide'),
        $scrollerDiv = $('#scrollerDiv'),
        viewportH = $(window).height();

    $rightSide
    .css('top', viewportH)
    .mouseenter(function () {
        //    mouse is now in #rightSide
        $scrollerDiv.fadeIn(300);
        $rightSide.mousemove(function (e) {
            var calcTop = e.pageY - viewportH - 25;
            $scrollerDiv.css('top', calcTop + 'px');
        });
    })
    .mouseleave(function () {
        $scrollerDiv.fadeOut(300);
        $rightSide.unbind('mousemove');
    })
    .click(function () {
        $(document.body).animate({
            scrollTop: 0
        }, "slow");
    });
});