CSS issue with back-to-top button

Question

I used this plugin (http://codyhouse.co/gem/back-to-top/) in order to include a back-to-top button on my site.

I included this link just before the end of my body-tags:

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

This is the CSS part:

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

}

Here's the JS part:

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
    );
});

});

I had to post all of it (sorry) because I have absolutely no clue what could be behind my problem. My situation: My whole site is not responsive, so the position of the content does not adjust to (for example) a window resize. However, this button is/does. So when I reduce the browser window's width, the button "floats" along the right side, when it should actually be overflown by it.

Does anybody have an idea why this is happening? Thanks!!!

Can you check it out with Chrome? Can you open a console as a separate window and look at the CSS rules? You can untick them to see what would happen if the rules were not present. It is fun and it is an experiment, which might lead to a solution. — Lajos Arpad, Nov 30 '14 at 01:14

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

"Fixed" positioned element is relative to the viewport and removed from normal flow.

Fuzzical Logic explained positioning very nicele in this answer

edited May 23 '17 at 11:52

Community

1
1

answered Nov 30 '14 at 04:41

Mizanur Rahman

327
1
12

score 1 · Answer 2 · answered Feb 08 '16 at 22:13

In your case Frank, you might like to just hide the BTT element altogether for small screens, especially if your page is not very long and the user could reach the top in just a few thumb swipes.

If so, you might use something like in your CSS:

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

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

Alternatively, you could give it a z-index if it makes sense with the rest of your markup. I've implemented a re-styled version of these exact snippets. It works great on a responsive framework like Foundation. CodyHouse makes nice stuff. You should have seen a media query in the original demo/download which adjusts the fixed position slightly.

score 0 · Answer 3 · answered Nov 29 '14 at 22:42

0

.cd-top {
position: fixed;

That's your problem. You'll need to make it relative.

answered Nov 29 '14 at 22:42

Alex

8,875
2
27
44

no, it is supposed to be fixed. That's for the vertical scrolling. You might not have understood my question. See, the button always stays at the right side of the browser window when it is resized, when it actually should disappear as soon as the right side gets over the button. – Frank Nov 29 '14 at 22:44
1

you can compare it to this page here, when you reduce the browser window's width, the right sidebar ("Hot Network Questions") disappears at some point. That is what should happen with my button, too. – Frank Nov 29 '14 at 22:47

CSS issue with back-to-top button

3 Answers3