Tạo nút Scroll to Top khi cuộn trang xuống dưới

Blue · 09/12/2015

Khi bạn đọc một bài viết dài sẽ rất mất thời gian khi muốn cuộn về menu ở header của trang, rất nhiều website đã tạo 1 nút gọi là scroll to top hoặc back to top nằm ở góc phải giao diện. Khi nhấn vào nút này sẽ giúp bạn trở về header trang ngay lập tức.

Hình minh họa

Để thực hiện điều này các bạn chỉ cần vào style đang sử dụng, gắn đoạn code bên dưới vào cuối (nằm trên thẻ </body>) template footer

Mã:

<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>

cuonghv · 09/12/2015

Áp dụng ngay và luôn. Tìm kiếm mãi mà không có cái nào vừa ý!
Thank nhóa!

2L.Ohayo · 09/12/2015

cho em xin luôn đoạn script go to bottom với ạ.

PVS · 09/12/2015

em cần cái này lâu lắm òy ^^ hii

Blue · 09/12/2015

2L.Ohayo nói:
cho em xin luôn đoạn script go to bottom với ạ.

troll anh à, đoạn đó để làm gì :v

chanhnghiem · 17/01/2016

em bị lỗi admin ơi

Blue · 17/01/2016

chanhnghiem nói:
em bị lỗi admin ơi View attachment 8966

Bạn kiểm tra kỹ lại xem giống hoàn toàn đoạn mình viết chưa nhé, thiếu nên thế đó.

chanhnghiem · 17/01/2016

Blue nói:
Bạn kiểm tra kỹ lại xem giống hoàn toàn đoạn mình viết chưa nhé, thiếu nên thế đó.

em copy 2 lần vẫn vậy anh. em có lấy từ style a share nó có totop nhưng vẫn lỗi đó

Mã:

<script>
function popupCenter(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
jQuery('.popupxf').click(function(e) { 
e.preventDefault()
popupCenter(jQuery(this).attr('href'), 'myPop1',650,450);
}); 
</script><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 {xen:property 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: {xen:property 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>

dev.xf · 17/01/2016

2L.Ohayo nói:
cho em xin luôn đoạn script go to bottom với ạ.

http://congngheaz.com/threads/tao-nut-scroll-to-top-va-scroll-to-bottom-cho-xenforo.11979/

đây em

chanhnghiem · 17/01/2016

dev.xf nói:
http://congngheaz.com/threads/tao-nut-scroll-to-top-va-scroll-to-bottom-cho-xenforo.11979/

đây em

cũng bị thế bác à

dev.xf · 17/01/2016

chanhnghiem nói:
cũng bị thế bác à

inbox mình nick admin diễn đàn bạn mình giải quyết cho nha

dev.xf · 17/01/2016

2L.Ohayo · 17/01/2016

dev.xf nói:
http://congngheaz.com/threads/tao-nut-scroll-to-top-va-scroll-to-bottom-cho-xenforo.11979/

đây em

Tưởng anh bỏ site rồi, có 1 đợt thấy lỗi tùm lum rồi mail liên hệ lại là hiephoiketoan gì gì đó

agrione · 17/01/2016

2L.Ohayo nói:
Tưởng anh bỏ site rồi, có 1 đợt thấy lỗi tùm lum rồi mail liên hệ lại là hiephoiketoan gì gì đó

Xây dựng đến mức đó mà bỏ thì ko phải quá uổng sao
Test cái chủ top phát

dev.xf · 17/01/2016

2L.Ohayo nói:
Tưởng anh bỏ site rồi, có 1 đợt thấy lỗi tùm lum rồi mail liên hệ lại là hiephoiketoan gì gì đó

đợt đó anh đi trung quốc nên không có a online dc eà

Blue · 18/01/2016

Vẫn lỗi là do style của bạn rồi, khu vực chép mã css vào phải nằm trên thẻ </body> nhé

dinhhai · 18/01/2016

Cảm ơn bác @Blue
Đúng thứ đang cần

Chiennd1810 · 02/06/2016

Em dùng Xen 1.5.7 style Nitrogen
tìm trong template footer không thấy có thẻ </body>
các bạn giúp em với

Mã:

<xen:edithint template="footer.css" />

<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
        <ul>
        <li class="footerBlock footerBlock1">
            <xen:if is="@footerBlock1">
            <div>
                @footerBlock1
            </div>
            </xen:if>
        </li>
        <li class="footerBlock footerBlock2">
            <xen:if is="@footerBlock2">
            <div>
                @footerBlock2
            </div>
            </xen:if>
        </li>
        <li class="footerBlock footerBlock2 footerBlock3">
            <xen:if is="@footerBlock3">
            <div>
                @footerBlock3
            </div>
            </xen:if>
        </li>
        <li class="footerBlock footerBlock4">
            <xen:if is="@footerBlock4">
            <div>
                @footerBlock4
            </div>
            </xen:if>
        </li>
        </ul>
        <xen:comment>
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
            <dl class="choosers">
                <xen:if is="{$canChangeStyle}">
                    <dt>{xen:phrase style}</dt>
                    <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                    <dt>{xen:phrase language}</dt>
                    <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                </xen:if>
            </dl>
            </xen:if>
           
            <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
            </xen:comment>
           
            <span class="helper"></span>
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
       
           
       
            <ul id="legal">
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                <xen:if is="{$canChangeStyle}">
                <li>
                    <a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a>
                </li>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                <li>
                    <a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a>
                </li>
                </xen:if>
            </xen:if>
            <xen:hook name="footer_links_legal">
                <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
            </xen:hook>
            <li>
                <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink"><i class="fa fa-angle-up fa-lg"></i><xen:comment>{xen:phrase go_to_top}</xen:comment></a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
            </li>
            </ul>
           
            <xen:if is="{$debugMode}">
                <xen:if hascontent="true">
                    <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                    <xen:contentcheck>
                        <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                        <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                        <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                    </xen:contentcheck>
                    </dl>
                </xen:if>
            </xen:if>
           
            <span class="helper"></span>
        </div>
    </div>   
</div>
</xen:hook>

Vien · 08/06/2016

Chiennd1810 nói:
Em dùng Xen 1.5.7 style Nitrogen
tìm trong template footer không thấy có thẻ </body>
các bạn giúp em với

Không có thì cứ nhét vào cuối cùng nhé!

tuna · 14/03/2017

em làm theo nhưng chỉ tới cuối trang thì mới bấm đc nút, có cách nào ở giữa trang vẫn back to top đc giống vnxf ko ạ

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Tạo nút Scroll to Top khi cuộn trang xuống dưới

Founder

Moderator

Moderator

Super Moderator

Founder

Corporal

Founder

Corporal

Sergeant

Corporal

Sergeant

Sergeant

Moderator

Corporal

Sergeant

Founder

MasterCorporal

Private

Private

Sergeant

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Hướng dẫn sử dụng

Texlink

Nhà Tài Trợ