CSS Bootstrap 附加“返回顶部”链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22413203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Affix "Back to Top" Link
提问by Panman
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 Fiddlethat demonstrates my setup. I'm also not a pro at positioning so that is part of my issue too.
好的，我在理解Bootstrap Affix 组件时遇到问题。如果/当页面滚动到内容顶部下方时，我的目标是在屏幕左下角（在边距中）显示“返回顶部”链接。我的页面有一个固定在顶部的 NavBar 和一个用于主体的容器。以下是我所处位置的总体思路，但我还设置了一个 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>
回答by Panman
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:
现在我更好地理解了 Affix 组件，我想出了解决方案。指定顶部偏移并调整 CSS 后，它运行良好。该链接将滚动到视图中，然后“固定”到底部。对于没有滚动条的页面，链接永远不会启用。我已经用一个工作示例更新了JS Fiddle（这里）。关键部分是：
HTML:
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:
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:
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>
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.
注意：由于词缀容器高度计算的错误（引导问题 #4647），我无法使用词缀底部偏移（示例）来隐藏短页面的链接。我确定有一种解决方法，并且欢迎使用此方法的解决方案。
回答by mazuno
thanks for the back to top button, proved useful for me as well :)
one minor improvement though would be to avoid using the onclick=""on the <a>tag but instead using jQuery'sevent registrator:
感谢返回顶部按钮，事实证明对我也很有用:) 一个小的改进是避免onclick=""在<a>标签上使用 ，而是使用jQuery's事件注册器：
HTML:
HTML：
...
<a href="#top" id ="backToTopBtn" class="well well-sm">
...
JS:
JS：
$('#backToTopBtn').click(function(){
$('html,body').animate({scrollTop:0},'slow');return false;
});
