CODEWITHSUNDEEP
jqueryhtmlcss
Frank
Frank

Reputation: 624

CSS issue with back-to-top button

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

Upvotes: 0

Views: 1563

Answers (3)

Bobby Fritze
Bobby Fritze

Reputation: 182

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.

Upvotes: 1

Mizanur Rahman
Mizanur Rahman

Reputation: 327

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

Fuzzical Logic explained positioning very nicele in this answer

Upvotes: 1

Alex
Alex

Reputation: 9041

.cd-top {
position: fixed;

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

Upvotes: 0

Related Questions