JavaScript setTimeout 导致 scrollTop 事件？

Question

I have a collection of divs in a document that can be filtered by classname, as in hiding and showing elements. The list can be filtered by clicking either a corresponding element in the list or one of the items in the top menu.

I made this pen to illustrate my problem.

I call the filter function for each click event, which hide all elements, and after using window.setTimeout() I display the right ones like below. This is to get a delay as well as to trigger fade-in css3-animations.

var filter = function(el){

  if(filterClass==='all'){
    window.setTimeout(function(){
      $('.project').show(); //show all projects
      $('#filter-all').addClass('active');
    }, 100);
  }
  else{
    window.setTimeout(function(){
      $('.'+filterClass).show(); //show filtered projects
      $('#back2').show();
      $('#'+elClassName).addClass('active');
    }, 100);
  }  
};

The problem is that when I use window.setTimeout() the view scrolls up to the top, even if the view is in the bottom of the page.

Try this in the pen:

1. Show all
2. Scroll down to the bottom so that the top of the document is not visible in the view.
3. Filter by clicking some div.

Result: It gets filtered correctly, but the view always scrolls/jumps up to the top.

Why is this happening?

I expected it to stay in the same relative scroll view when possible and otherwise end up at the bottom of the scrollbar. This is to me the standard and desired behavior.

Answer 1

The page scrolls top because you hide elements. So there is no more downward scrollable area. If you had 1000 items and you filtered 999 and show only 1, then what would you expect? The scrollable area would be way too short.

For your case, I would remove

$(".project").hide()

And hide non-matching items only:

else{
    window.setTimeout(function(){
      $('.'+filterClass).show();
      $(".project:not(" + '.' + filterClass + ')').hide();
      $('#back2').show();
      $('#'+elClassName).addClass('active');
    }, 100);
  } 

Not a perfect solution because there would be some scroll top. But in most cases, it would be less.