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

[2L.Ohayo]

Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn

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>