Bootstrap Affix“Back to Top”链接 [英] Bootstrap Affix "Back to Top" Link

问题描述

好的，我在理解 Bootstrap Affix组件时遇到问题。我的目标是，如果/当页面滚动到内容顶部之下时，屏幕左下角（页边空白处）会显示一个返回顶部链接。我的页面有一个NavBar固定在顶部和一个容器的身体。下面是我在哪里的一般想法，但我也设置一个JS小提琴，演示了我的设置。我也不是一个职业的定位，所以这也是我的问题的一部分。

Alright, I'm having trouble understanding the Bootstrap Affix component. My goal is to have a "Back to Top" link appear at the bottom left of the screen (in the margin) if/when the page is scrolled below the top of the content. My page has a NavBar fixed to the top and a container for the body. Below is the general idea of where I'm at but I've also setup a JS Fiddle that demonstrates my setup. I'm also not a pro at positioning so that is part of my issue too.

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

推荐答案

现在我更好地理解Affix组件想出解决方案。在指定顶部偏移和调整CSS，它的工作很好。链接将滚动到视图，然后固定到底部。对于没有滚动条的页面，该链接从不启用。我已用一个工作示例更新了 JS Fiddle（此处）。主要部分是：

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:

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 ）。我相信有一个解决方法，并欢迎这种方法的解决方案。

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.

这篇关于Bootstrap Affix“Back to Top”链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！