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
Thay bằng
Bước 2: Thêm vào cuối template footer hoặc page_container_js_body
Bước 3: Thêm vào cuối template footer.css hoặc EXTRA.CSS
Demo: http://giangpt.net hoặc http://brivium.com
Bước 1: Mở template footer, tìm đoạn
Mã:
<a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a>
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

Đính kèm
Bài viết liên quan
Bài viết mới
Cần trợ giúp
bởi Wadd,