I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.

Short version: Can't get this, or anything similar, to work

$("#Container3").scrollTop(0);

Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.

Long version: I'm sorry but posting a code snippet isn't feasible as it's a plex app-like interface but I'll try to explain the issue to the best of my abilities:

• Mobile responsive website that loads different interfaces depending on screen real-estate.
• Smallest interface posed of 3 parts - navigation at the top, search at the bottom and content in the middle.
• Content is mostly loaded during use and not at page load.
• At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
• While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.

The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.

This is what my jquery request looks like

$(document).on("click",".NavRowButton",function(event){
    $("#Container3").scrollTop(0);
    var $targetButtonId=$(event.target).attr("id");
    $("#Content").load("/load/login/"+$targetButtonId+".php");
    $("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
    $("#Container3").find(".WindowBorder").css("top","0");
});

#Container3 has the scroll bar and is the immediate parent of #Content.

This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        var $currentScroll=$(event.target).scrollTop();
        console.log($currentScroll);
        var $targetId=$(event.target).attr("id");
        console.log($targetId);
    }
},true);

Thanks in advance.

Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.

Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.

They now look like this(also had to add a condition to limit load events):

global variable:

$DivTestVar="";

click:

$(document).on("click",".NavRowButton",function(event){
    var $targetButtonId=event.target.id;
    if($targetButtonId != $("#DisplayContentName").html()){
        $($DivTestVar).scrollTop(0);
        console.log($($DivTestVar).get());
        $("#Content").load("/load/login/"+$targetButtonId+".php");
        $("#DisplayContentName").html($targetButtonId);
        $("#Container3").find(".WindowBorder").css("top","0");
    };
});

scroll debugging:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        $DivTestVar=event.target;
        var $currentScroll=$($DivTestVar).scrollTop();
        console.log($currentScroll);
        var $targetId=event.target.id;
        console.log($targetId);
    }
},true);

If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.

Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have e across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.

I have a feeling what ever gave me problems that I tried to find a solution in this question - Can't trigger a jquery function with scroll on a particular div - might be responsible for scroll related issues here.

Short version: Can't get this, or anything similar, to work

$("#Container3").scrollTop(0);

Nothing happens really, no error in the console, no wierd behaviour, just seems to ignore the scrollTop(0) request.

Long version: I'm sorry but posting a code snippet isn't feasible as it's a plex app-like interface but I'll try to explain the issue to the best of my abilities:

• Mobile responsive website that loads different interfaces depending on screen real-estate.
• Smallest interface posed of 3 parts - navigation at the top, search at the bottom and content in the middle.
• Content is mostly loaded during use and not at page load.
• At the push of a button that re-loads the contents of a particular div I also need to scroll that div to the top for usability purposes.
• While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.

The load is done outside the viewport so animations aren't needed but I'll take them as long as they get this to work.

This is what my jquery request looks like

$(document).on("click",".NavRowButton",function(event){
    $("#Container3").scrollTop(0);
    var $targetButtonId=$(event.target).attr("id");
    $("#Content").load("/load/login/"+$targetButtonId+".php");
    $("#DisplayContentName").html("<span class='NavColSpan'>"+$targetButtonId+"</span>");
    $("#Container3").find(".WindowBorder").css("top","0");
});

#Container3 has the scroll bar and is the immediate parent of #Content.

This is a function I'm still building and is the solution for the problem I had before and also what I'm using now to help debugging this one:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        var $currentScroll=$(event.target).scrollTop();
        console.log($currentScroll);
        var $targetId=$(event.target).attr("id");
        console.log($targetId);
    }
},true);

Thanks in advance.

Edit: I just noticed that if I put a $(event.target).scrollTop(0); at the end of the scroll distance debugging function it actually resets the scroll so it seems that as long as the div is the event.target it works while from the outside as during the click function I might not selecting it appropriately.

Edit2: I just learned I can cache event.targets into variables and with a .get() inside the click function I'm sure I'm selecting the right element so it just leaves how the scrollTop(0) method works.

They now look like this(also had to add a condition to limit load events):

global variable:

$DivTestVar="";

click:

$(document).on("click",".NavRowButton",function(event){
    var $targetButtonId=event.target.id;
    if($targetButtonId != $("#DisplayContentName").html()){
        $($DivTestVar).scrollTop(0);
        console.log($($DivTestVar).get());
        $("#Content").load("/load/login/"+$targetButtonId+".php");
        $("#DisplayContentName").html($targetButtonId);
        $("#Container3").find(".WindowBorder").css("top","0");
    };
});

scroll debugging:

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        $DivTestVar=event.target;
        var $currentScroll=$($DivTestVar).scrollTop();
        console.log($currentScroll);
        var $targetId=event.target.id;
        console.log($targetId);
    }
},true);

If I click before scrolling the console.log($($DivTestVar).get()); returns empty but if at the first scroll it starts returning the correct DOM element. The scrollTop(0) is ignored anyway.

Edit3: I just want to leave a small update. I have since given up on the method I was trying to use here for something with a similar effect but not as user friendly as what I was trying to achieve. As such I no longer care about this personally but if you're reading this and have a similar problem I have e across this issue a couple more times to a smaller effect and I now think it's related to position:fixed; elements and how scrollTop() deals with that but I don't have the time to delve into it more so good luck and godspeed.

• javascript
• jquery
• html
• scroll

• Would love to see a jsfiddle demonstrating the problem. – davidkonrad Commented Oct 5, 2015 at 15:33
• 1 Flagging for: Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. - Please edit your question to include a JS/HTML/CSS snippet that reproduces the error (with the least amount of code). See minimal reproducible example. – BSMP Commented Oct 5, 2015 at 15:34
• "doesn't work" isn't very descriptive. Describe precisely what happens and how it differs from your hopes and dreams! – Lightness Races in Orbit Commented Oct 5, 2015 at 15:46
• @davidkonrad, sorry I should have mentioned again that posting code isn't feasible because it's such a plex interface I have no idea what might be causing the problem. Someone was able to pinpoint a solution for my other problem without much info (probably happened to them too) so I was hoping someone would be able to help here as well. In any case I'll edit the question with more details i had on the other question. – Ricardo Marques Commented Oct 5, 2015 at 15:47
• @LightnessRacesinOrbit Ups yeah I'll edit that into the question too. Nothing happens really. Nothing shows up on the console. Nothing, same as my other problem, it just doesn't really work :| – Ricardo Marques Commented Oct 5, 2015 at 15:48

2 Answers 2

Did you try the pure JS version ?

document.getElementById('Container').scrollTop = 0

You have two possibilities, as far as I know.

1-Scroll the whole page until it reached the top of your #Content div position with jQuery.

2-Your #Content is inside a div with scroll, which scrollTop(0) will work for that (example: http://jsfiddle/zkp07abu/).