Question

我使用此插件（http://codyhouse.co/gem/back-to-top/）以在我的网站上包含一个回到顶部的按钮。

我在body标签结束之前添加了这个链接：

<a href="#0" class="cd-top"></a>

这是CSS部分：

.cd-top {
position: fixed;
background: rgba(34, 34, 34, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 0.8;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #515151;
opacity: 1;
}
.cd-top {
height: 60px !important;
width: 60px !important;
right: 280px !important;
bottom: 50px !important;

}

这是JS部分：

jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
    if( $(this).scrollTop() > offset_opacity ) { 
        $back_to_top.addClass('cd-fade-out');
    }
});

//smooth scroll to top
$back_to_top.on('click', function(event){
    event.preventDefault();
    $('body,html').animate({
        scrollTop: 0 ,
        }, scroll_top_duration
    );
});

});

我不得不发布所有内容（抱歉），因为我完全不知道我的问题背后可能是什么。我的情况：我的整个网站没有响应，所以内容的位置不适应（例如）窗口调整大小。但是，这个按钮是/的。因此，当我缩小浏览器窗口的宽度时，按钮＆＃34;浮动＆＃34;在它的右边，它实际上应该被它溢出。

有人知道为什么会这样吗？感谢!!!

Answer 1

在你的情况下，弗兰克，你可能只想完全隐藏BTT元素用于小屏幕，特别是如果你的页面不是很长并且用户可以通过几个拇指滑动到达顶部。

如果是这样，您可能会使用CSS中的内容：

@media only screen and (max-width: 48em) {

  .cd-top {
  display:none!important;
  }
}

或者，如果对标记的其余部分有意义，则可以给它一个z-index。我已经实现了这些精确片段的重新设计版本。它在像Foundation这样的响应式框架上运行良好。 CodyHouse做得很好。您应该在原始演示/下载中看到媒体查询，稍微调整固定位置。

Answer 2

.cd-top {
position: fixed;

那是你的问题。你需要让它相对。

Answer 3

＆＃34;固定＆＃34;定位元素相对于视口并从正常流中移除。

Fuzzical Logic explained positioning very nicele in this answer

回到顶部按钮的CSS问题

3 个答案: