CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Ricardo Marques
Ricardo Marques

Reputation: 99

.scrollTop(0) not working for getting a div to scroll to the top

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 complex app-like interface but I'll try to explain the issue to the best of my abilities:

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 come 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.

Upvotes: 1

Views: 11849

Answers (2)

Zander
Zander

Reputation: 1086

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.net/zkp07abu/).

Upvotes: 1

Gael
Gael

Reputation: 167

Did you try the pure JS version ?

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

Upvotes: 4

Related Questions