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

2L.Ohayo

Moderator
Thành viên BQT
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

Mã:
<a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a>
Thay bằng
Mã:
<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

Mã:
<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
Mã:
.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


Gaak2vc.png
 

Đính kèm

  • gotoTop.gif
    gotoTop.gif
    5.8 MB · Lượt xem: 942
  • Like
Reactions: THB
Style nếu sử dụng Font Awesome icons, demo::

upload_2017-11-15_13-0-57.png


PHP:
<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>
 
Back
Top