Question

I’m using jquery to display/hide my comments on my blog. I show a bubble besides the title of the post displaying number of comments. On clicking that bubble, the comments show up at the bottom of the post.

My problem is, if the post is long(which they usually tend to be), the user has no clue there’s a comment section popped up below the post. Is there some way to proceed to this comments section at the bottom of the post? I’m using the toggle function like so:

var $j = jQuery.noConflict();
        $j(".post-comments").addClass("hidden"); //hide all comments on page
        $j(".post-comments-count").toggle(
              function () {
                    $j(this).parent().parent().find(".post-comments").removeClass("hidden");
                    /* alert('should slide down');
                    $j(this).parent().parent().find(".post-comments").slideDown("slow");*/
              },
              function () {
                    $j(this).parent().parent().find(".post-comments").addClass("hidden");
                    /* alert('should slide up');
                    $j(this).parent().parent().find(".post-comments").slideUp("slow"); */
              }
        );

Couple of things:

• I suppose one solution would be to add a #link suffix to the bubble’s anchor tag? the issue however would be on clicking it again, it wouldn’t exactly work too well in closing the comments section?
• Yes I’m aware that once you open it up, you can only close the comments section again by clicking the bubble on top, which most people won’t bother doing. Nevertheless, i’m willing to live with that.

(not directly related)

• I’ve commented the slide-down function because for some bl**dy reason my jquery conks off when in wordpress and doesn’t slide back up. Hence the straight forward addition and removal of classes.
• If you want a live example, you’re welcome to check it out at my blog: kaushikgopal.com/blog

Answer 1

The simple way to accomplish the scroll you’re talking about (including a smooth animation) is with the code below:

var comment_div = $j(this).parent().parent().find(".post-comments");
comment_div.removeClass("hidden");

var targetOffset = comment_div.offset().top;
$j('html,body').animate({scrollTop: targetOffset}, 1000);

The first part obviously is just a rewrite of your existing class change, but also stores the reference to the comment DOM element that you just un-hid.

The second part calculates the vertical offset from the top of the HTML body to the top of the comments div. Then it scrolls the page to that offset position, animated over 1sec (or 1000msec). By adjusting the targetOffset value, you can adjust where on the screen the user gets scrolled to.