Bootstrap 附加“返回顶部”链接

Question

好的，我无法理解 Bootstrap Affix component。如果/当页面滚动到内容顶部下方时，我的目标是在屏幕左下角（边缘）出现一个“返回顶部”链接。我的页面有一个固定在顶部的 NavBar 和一个用于正文的容器。以下是我所在位置的总体思路，但我也有 setup a JS Fiddle 来演示我的设置。我也不是定位专家，所以这也是我的问题的一部分。

<div class="navbar navbar-fixed-top">...</div>
<div class="content-container" id="top">
    <p>Content that is longer than the viewport..</p>
    <span id="top-link" data-spy="affix">
        <a href="#top" class="well well-sm">Back to Top</a>
    </span>
</div>

<style>
    .navbar-fixed-top + .content-container {
        margin-top: 70px;
    }
    .content-container {
        margin: 0 125px;
    }
    #top-link.affix {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
</style>

Answer 1

现在我更好地理解了 Affix 组件，我想出了解决方案。指定顶部偏移量并调整 CSS 后，它运行良好。该链接将滚动到视图中，然后“固定”到底部。对于没有滚动条的页面，该链接永远不会启用。我已经用一个工作示例更新了JS Fiddle (here)。关键部分是：

HTML：

<!-- 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
    </a>
</span><!-- /top-link-block -->

JS：

<script>
// Only enable if the document has a long scroll bar
// Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
    $('#top-link-block').removeClass('hidden').affix({
        // how far to scroll down before link "slides" into view
        offset: {top:100}
    });
}
</script>

CSS：

<style>
#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px;
    left: 10px;
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px;
    left: 10px;
}
</style>

注意：我无法使用 affix bottom offset (example) 隐藏短页面的链接，因为词缀容器高度计算存在错误（引导问题 #4647）。我确信有一种解决方法，并且会欢迎这种方法的解决方案。

Answer 2

感谢返回顶部按钮，对我也很有用 :) 一个小的改进是避免在<a> 标签上使用onclick=""，而是使用jQuery's 事件注册器：

HTML：

...
<a href="#top" id ="backToTopBtn" class="well well-sm">
...

JS：

 $('#backToTopBtn').click(function(){
        $('html,body').animate({scrollTop:0},'slow');return false;
    });