Bootstrap Affix"返回顶部"链接

好吧,我无法理解Bootstrap Affix组件.我的目标是,如果/当页面滚动到内容顶部下方时,屏幕左下方(边距)会出现"返回顶部"链接.我的页面有一个固定在顶部的NavBar和一个用于正文的容器.下面是我在哪里的一般想法,但我也设置了一个演示我的设置的JS小提琴.我也不是专业人士,所以这也是我的问题的一部分.

...

    
Content that is longer than the viewport..
    
        Back to Top
    

Panman.. 33

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

HTML:

    
         Back to Top
    

JS:

CSS:

注意:由于附加容器高度计算错误(Bootstrap Issue#4647),我无法使用词缀底部偏移(示例)来隐藏短页面的链接.我确信有一种解决方法,并欢迎这种方法的解决方案.

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

HTML:

    
         Back to Top
    

JS:

CSS:

注意:由于附加容器高度计算错误(Bootstrap Issue#4647),我无法使用词缀底部偏移(示例)来隐藏短页面的链接.我确信有一种解决方法,并欢迎这种方法的解决方案.

感谢您的返回页首按钮，它对我也很有用:)尽管有一个小改进，但可以避免使用标记onclick=""上的标签，而可以使用jQuery's事件注册器：

...

...

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