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
– Lajos Arpad, Commented Nov 30, 2014 at 1:14

Community · Accepted Answer · 2017-05-23 11:52:50Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Nov 30, 2014 at 4:41

Mizanur Rahman

3271 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bobby Fritze · Accepted Answer · 2016-02-08 22:13:46Z

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.

Alex · Accepted Answer · 2014-11-29 22:42:36Z

0

.cd-top { position: fixed;

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

answered Nov 29, 2014 at 22:42

Alex

9,0612 gold badges29 silver badges44 bronze badges

2 Comments

Frank Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

CSS issue with back-to-top button

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related