Darren Bachan Darren Bachan - 1 year ago 42
Javascript Question

Can't detect scroll to top if I'm in a fixed div

This issue felt a bit complex to replicate in a fiddle, so I have the issue here.

On the homepage if you scroll and then click on the logo it'll scroll you up just fine, but if you click onto a project and try to do the same thing it won't work. I believe it can't detect the scroll because once a project is active the containing div is fixed so it'll technically scroll what's beneath, which is the homepage.


$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, 700);
return false;


#project {

background: #efefed;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
body.projectLoaded {
overflow: hidden;
body.projectLoaded #project {
#project-container {
overflow: auto;
position: relative;
height: 100%;
padding-top: 60px;

Is there a way to still make this javascript function the way I want it to? I know the way it's built it may be difficult. In the
div I was trying to do this How to make div fixed after you scroll to that div? and I believe for the same reason, why this won't work either.

So the solution was to add #project-container in the listener. How would I do it here?

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
position: 'fixed',
top: '0',
left: '0'
} else {
position: 'static'

Would it become
(window, "#project-container")

Answer Source
$("a[href='#top']").click(function() {
        $("html, body, #project-container").animate({ scrollTop: 0 }, 700);
        return false;