Question

好吧，我无法理解Bootstrap Affix component。我的目标是拥有一个＆＃34;返回顶部＆＃34;如果/当页面滚动到内容顶部下方时，链接将显示在屏幕的左下角（在边距中）。我的页面有一个固定在顶部的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后，它运行良好。链接将滚动到视图，然后＆＃34; pin＆＃34;至底部。对于没有滚动条的页面，永远不会启用该链接。我用一个有效的例子更新了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>

注意：由于附加容器高度计算错误（Bootstrap Issue＃4647），我无法使用affix bottom offset (example)隐藏短页链接。我确定有一种解决方法，欢迎使用此方法的解决方案。

Answer 2

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

HTML：

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

JS：

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

Bootstrap Affix“返回顶部”链接

2 个答案: