Hướng dẫn Tạo nút Scroll To Top đẹp cho xenforo

[2L.Ohayo]

Thấy nút scroll top top của brivium đẹp nên lượm về chia sẻ cho mọi người.

Bước 1: Mở template footer, tìm đoạn

<a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a>

Thay bằng

<a href="javascript:void(0)" class="topLink"><i class="fa fa-plane" aria-hidden="true"></i></a>

Bước 2: Thêm vào cuối template footer hoặc page_container_js_body

<script type="text/javascript">
!function(o, e, t, s) {
XenForo.GoToTop = function(o) {
        this.__construct(o);
    }, XenForo.GoToTop.prototype = {
        __construct: function(t) {
            this.$element = t, t.attr("background-color", t.css("background-color")), this.detect(),
            o(e).scroll(o.context(this, "detect")), t.click(o.context(this, "click")), t.hover(o.context(this, "hover")),
            t.mouseleave(o.context(this, "mouseleave"));
        },
        detect: function() {
            var t = this.$element;
            600 < o(e).scrollTop() ? (t.hasClass("hide") || "none" == t.css("display")) && (t.removeClass("hide"),
            t.show().css({
                bottom: 50,
                opacity: 1,
                backgroundColor: t.attr("background-color")
            }), this.$element.removeClass("isHover")) : t.hasClass("hide") && "none" == t.css("display") || (t.addClass("hide"),
            t.fadeOut(500));
        },
        hover: function() {
            this.$element.addClass("isHover");
        },
        mouseleave: function() {
            this.$element.removeClass("isHover");
        },
        click: function() {
            var e = this.$element;
            this.$element.hasClass("isHover") || this.$element.addClass("isHover"), e.css("background-color", "transparent"),
            e.animate({
                bottom: 500,
                opacity: 0
            }, 1500), o("html, body").animate({
                scrollTop: 0
            }, 1e3);
        }
    }, XenForo.register(".topLink", "XenForo.GoToTop"), XenForo.LoginControl = function(o) {
        this.__construct(o);
    };
}(jQuery, this, document);
</script>

Bước 3: Thêm vào cuối template footer.css hoặc EXTRA.CSS

.footer .topLink
{
    position: fixed;
    right: 2%;
    bottom: 30px;
    display: none;
    width: 50px;
    height: 50px;
    background-color: rgba(68, 68, 68, 0.5);
    color: #fff;
    padding: 0;
    border-radius: 100%;
    z-index: 9998;
    text-align: center;
    transition: background 0.6s;
}
.footer .topLink.isHover
{
    background-color: transparent !important;
}
.footer .topLink .fa
{
    transition: all 1s;
    font-size: 22px;
    position: absolute;
    left: 50%;
    top: 45%;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    -ms-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
}
.footer .topLink.isHover .fa
{
    font-size: 60px;
    color: @primaryLightish;
}

Demo: http://giangpt.net hoặc http://brivium.com

 

[quick87]

Style nếu sử dụng Font Awesome icons, demo::

<style type="text/css">
#scrollToTop, #scrollToBottom {
cursor: pointer;
    background-color: rgba(68, 68, 68, 0.5); /* Đổi màu nền ở đây */
    display: inline-block;
    height: 30px;
    width: 30px;
    color: #fff; /* Đổi màu mũi tên ở đây */
    font-size: 14pt;
    text-align: center;
    text-decoration: none;
    line-height: 23px;
    position: fixed;
    right: 5px; /* Đổi khoảng cách so với lề phải ở đây, nếu muốn hiện ở lề trái thì đổi thành left */
    bottom: 25px; /* Khoảng cách từ nút cho tới chân trang */
    display:none;
}
#scrollToTop {
    bottom: 65px;
}
</style>
<script type = "text/javascript">
$(function () {
    $('#scrollToBottom').bind("click", function () {
        $('html, body').animate({ scrollTop: $(document).height() }, 200);
        return false;
    });
    $('#scrollToTop').bind("click", function () {
        $('html, body').animate({ scrollTop: 0 }, 200);
        return false;
    });
});
$(window).bind("scroll", function () {
    if ($(this).scrollTop() > 0) {
        $('#scrollToTop').show();
        $('#scrollToBottom').show();
    } else {
        $('#scrollToTop').hide();
        $('#scrollToBottom').hide();
    }
});
</script>

<a href="javascript:;" id="scrollToBottom"><i class="fa fa-hand-o-down" aria-hidden="true"></i></a>
<a href="javascript:;" id="scrollToTop"><i class="fa fa-hand-o-up" aria-hidden="true"></i></a>