Databases
StackOverflow2013
Postsdbo
POScroll to top script not working in conjunction with overflow:scroll
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScroll to top script not working in conjunction with overflow:scroll
    text
    copied!<p>I wrote this scroll to top script. Everything works great but not with overflow:scroll which I have applied to my wrapper div. The reason I need overflow:scroll is because I have overflow:hidden for html/body tag. This is neccesary for my custom scrollbar to function at best. I am aware that this interferes with this script, but why? </p> <p>The script works only partially well. The "scroll to top" appears when scrolling down, but after clicking it, it wont go to the top.</p> <p>What am I doing wrong?</p> <p><strong>This is the Javascript:</strong></p> <pre><code>&lt;script&gt; jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() &gt; offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('#wrapper').animate({scrollTop: 0}, duration); return false; }) }); &lt;/script&gt; </code></pre> <p><strong>My CSS</strong></p> <pre><code>&lt;style&gt; .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; } &lt;/style&gt; </code></pre> <p><strong>and finally this is the Html:</strong></p> <pre><code>&lt;a href="#" class="back-to-top"&gt;Back to Top&lt;/a&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload