CODEWITHSUNDEEP
jquerynavigation
KG -
KG -

Reputation: 7170

jquery go to section or part of the post

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:

(not directly related)

Upvotes: 1

Views: 706

Answers (2)

Marc L
Marc L

Reputation: 2092

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.

Upvotes: 1

tbreffni
tbreffni

Reputation: 5130

You could navigate to the anchor in javascript using the hash property of window.location. This way you can navigate when expanding the comments, but not navigate when closing them (or navigate to a different anchor tag, such as one on the main post heading).

Upvotes: 0

Related Questions