XenForo2 Sayfayı aşağı kaydırırken Yukarıya Kaydır düğmesi oluşturma

[guclusat]

Uzun bir makale okuduğunuzda sayfanın başlığındaki menüye geri dönmek çok zaman alacaktır. Birçok web sitesi, arayüzün sağ köşesinde bulunan yukarıya kaydır veya başa dön adlı bir düğme oluşturmuştur. Bu düğmeye tıklamak hemen sayfa başlığına dönmenize yardımcı olacaktır.

Bunu yapmak için kullandığınız stile gitmeniz, aşağıdaki kodu altbilgi şablonunun sonuna (</body> etiketinde bulunur) eklemeniz yeterlidir.

<style>
#toTop {
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 5px;
    bottom: 40px;
    color: #333;
    cursor: pointer;
    display: none;
    font-size: 11px;
    padding: 18px;
    position: fixed;
    right: 20px;
    text-align: center;
}
#toTop::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent @primaryMedium; /*Đổi #198708 bằng mã màu bạn muốn*/
    border-image: none;
    border-style: solid;
    border-width: 11px;
    content: "";
    height: 0;
    left: 7px;
    position: absolute;
    top: -4px;
    width: 0;
}
#toTop::after {
    background-color: @primaryMedium;;
    content: "";
    height: 12px;
    left: 13px;
    position: absolute;
    top: 18px;
    width: 10px;
}
</style>
<div id="toTop"></div>
<script type="text/javascript">
    //roll top
    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() != 0) {
                $('#toTop').fadeIn(); 
            } else {
                $('#toTop').fadeOut();
            }
        });
  
        $('#toTop').click(function() {
            $('body,html').animate({scrollTop:0},800);
        }); 
    });
</script>