jQuery: Prevent scrollTop on simulate click() or trigger('click')

Question

I'm having a set of tables that hide and show content when clicked on their th. Also I'm using scrollTop to reach to the top of each clicked table to better show its content. No problem so far... By default, I want the first table to show its content but I want to prevent the scrollTop in this case when the page loads. How can I do it?

$(document).ready(function() {

$('table tr').nextAll().hide();
var $button = $('table th').css('cursor', 'pointer');
$button.click( function() {
$(this).parent().nextUntil('table th').toggle();
$('html, body').animate({
    scrollTop: $(this).offset().top
    }, 500);
});  
$('table th:eq(0)').trigger('click', animate(false));
});

There must be some piece of code on .trigger() that helps me prevent this first scroll? Thanks for your help!

EDIT: Well, not the most elegant of solutions but splitting the events and having the trigger() placed before the animations seemed to work:

$(document).ready(function() {

$('table tr').nextAll().hide();
var $button = $('table th').css('cursor', 'pointer');
$button.click( function() {
        $(this).parent().nextUntil('table th').toggle();
}); 

$('table th:eq(0)').trigger('click');

$button.click( function() {
        $('html, body').animate({
        scrollTop: $(this).offset().top
        }, 500);
}); 
});

an example of this code is in: luxurycruisesgalapagos.com/test.html — Juan Carcelen
– Juan Carcelen, Commented May 30, 2013 at 20:47

Filippos Karapetis · Accepted Answer · 2013-05-30 21:20:48Z

1

Try moving the animation code inside the click handler, i.e. remove the animate code, and change your trigger code to be like this:

$('table th:eq(0)').click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top
        }, 500);
    });
});

answered May 30, 2013 at 21:20

Filippos Karapetis

5,20423 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Carcelen Over a year ago

Hi! Well, the animations are working ok when I click the TH, but on load I want "$('table th:eq(0)').click()" not to scroll given that there is not actual input form the user

Collectives™ on Stack Overflow

jQuery: Prevent scrollTop on simulate click() or trigger('click')

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related