<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="totopscroller"></div>

#totopscroller {
     position: fixed;
     right: 2%;
     bottom: 40px;
     width: 40px;
     float: right;
     z-index: 9999;
     display: inline-block;
}
#totopscroller i {
     cursor: pointer;
     color: #2089c0;
     font-size: 22px;
     width: 25px;
     text-align: center;
     background: transparent;
     z-index: 9999;
     border: 1px solid #dddddd;
}
#totopscroller i:hover {
     cursor: pointer;
     color: #000;
     border: 1px solid #ddd;
}
.fa-border {
     padding: .2em .25em .15em;
     border: solid 0.08em #eeeeee;
     border-radius: .1em;
}
.fa {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
#ipsLayout_footer a {
     opacity: 0.6;
}
#ipsLayout_footer a {
     color: #fff !important;
}
#ipsLayout_footer a {
     font-size: 14px;
     text-decoration: none;
     color: #333333;
}
.totopscroller-lnk i {
     font-weight: bold !important;
}
.fa-chevron-up:before {
     content: "\f077";
}
.fa-chain:before, .fa-link:before {
     content: "\f0c1";
}
.fa-chevron-down:before {
     content: "\f078";
}

<script type="text/javascript">
$(function() {
        $('#totopscroller').totopscroller({
            link: '#',
            toTopHtml: '<i class="fa fa-border fa-2x fa-chevron-up"></i>',
            toBottomHtml: '<i class="fa fa-border fa-2x fa-chevron-down"></i>',
            toPrevHtml: '<i class="fa fa-border fa-2x fa-chevron-left"></i>',
            linkHtml: '<a><i class="fa fa-border fa-2x fa-link"></i></a>',
        });
    })

    ! function(o) {
        o.fn.totopscroller = function(t) {
            var l = {
                    showToBottom: !0,
                    showToPrev: !0,
                    link: !1,
                    linkTarget: "_self",
                    toTopHtml: '<a href="#"></a>',
                    toBottomHtml: '<a href="#"></a>',
                    toPrevHtml: '<a href="#"></a>',
                    linkHtml: '<a href="#"></a>',
                    toTopClass: "totopscroller-top",
                    toBottomClass: "totopscroller-bottom",
                    toPrevClass: "totopscroller-prev",
                    linkClass: "totopscroller-lnk"
                },
                e = o.extend({}, l, t),
                s = 0,
                n = this,
                i = null,
                a = null,
                r = null,
                d = null,
                c = null,
                p = function() {
                    c = o("<div></div>"), e.showToBottom && (a = o(e.toBottomHtml), a.hide(), a.addClass(e.toBottomClass), a.appendTo(c)), e.showToPrev && (r = o(e.toPrevHtml), r.hide(), r.addClass(e.toPrevClass), r.appendTo(c)), i = o(e.toTopHtml), i.hide(), i.addClass(e.toTopClass), i.appendTo(n), e.link && (d = o(e.linkHtml), d.attr("target", e.linkTarget), d.attr("href", e.link), d.addClass(e.linkClass), d.appendTo(n)), c.appendTo(n), i.click(function(t) {
                        t.preventDefault(), s = o(document).scrollTop(), o("html, body").animate({
                            scrollTop: 0
                        }, {
                            duration: "slow",
                            complete: function() {
                    m()
                            }
                        })
                    }), e.showToBottom && a.click(function(t) {
                        t.preventDefault(), s = 0, o("html, body").animate({
                            scrollTop: o(document).height()
                        }, {
                            duration: "slow",
                            complete: function() {
                    m()
                            }
                        })
                    }), e.showToPrev && r.click(function(t) {
                        t.preventDefault(), o("html, body").animate({
                            scrollTop: s
                        }, {
                            duration: "slow",
                            complete: function() {
                    s = 0, m()
                            }
                        })
                    })
                },
                m = function() {
                    o(document).scrollTop() > 0 ? i.is(":visible") || i.fadeIn("slow") : i.is(":visible") && i.fadeOut("slow"), o(window).scrollTop() + o(window).height() == o(document).height() || s > 0 ? a.is(":visible") && a.fadeOut("slow") : a.is(":visible") || a.fadeIn("slow"), s > 0 ? r.is(":visible") || r.fadeIn("slow") : r.is(":visible") && r.fadeOut("slow")
                };
            return o(window).scroll(function() {
                o("html, body").is(":animated") || m()
            }), p(), m(), this
        }
    }(jQuery);
</script>