Bootstrap 스크롤된 페이지 위로 올라가기 ( Back to Top )

saltdoll 2016. 12. 29. 07:09

출처: http://stackoverflow.com/questions/22413203/bootstrap-affix-back-to-top-link

페이지 위로 가기

Now that I understand the Affix component better, I have come up with the solution. After specifying a top offset and adjusting the CSS, it's working nicely. The link will scroll into view and then "pin" to the bottom. For pages which do not have a scroll bar, the link is never enabled. I've updated the JS Fiddle (here) with a working example. Key pieces are:





<!-- child of the body tag -->
<span id="top-link-block" class="hidden">
    <a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
        <i class="glyphicon glyphicon-chevron-up"></i> Back to Top
</span><!-- /top-link-block -->



// Only enable if the document has a long scroll bar
// Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
        // how far to scroll down before link "slides" into view
        offset: {top:100}



#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px;
    left: 10px; /* right: 15px; 오른쪽에 위치시킬때 */
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px;
    left: 10px;

Note: I was not able to use the affix bottom offset (example) to hide the link for short pages due to a bug with affix container height calculation (Bootstrap Issue # 4647). I'm sure there is a workaround and would welcome the solution to this method.




도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
1 ··· 5 6 7 8 9