Because you want to change the comment area to infinite nesting, only the second level comments will be indented in the css style, and the lower level comments will not be indented, so you need to add the word @ XX before the comment content, and then click this word, you can jump to the position of the previous level comments through the anchor link.

The effect is as follows:

2840931222.png

Then came the problem~Click @ to test the site and jump to the first comment, part of the content was blocked by the fixed navigation above~

You may also encounter the problem that "fixed navigation blocks the content after the anchor jump". I found two solutions.

Pure CSS solution

If you can use css, you don't want to use js to solve the problem, because in terms of loading, css always loads first and is fast.

The comment HTML structure of typecho is as follows:

 <li id="comment-277" class="comment-body comment-child comment-level-odd comment-even comment-by-author">

We give comment-body Plus css

 .comment-body { position: relative; padding-top: 50px; margin-top: -50px; } /*Fix comment jump positioning problem*/

Perfect compatibility with Chrome and Firefox, other browsers have not been tested.

However, for my theme, the effect is as follows:

2337231891.png

It can be seen that if you jump to the second comment, padding top will make the second comment offset 50px downward, but the reply button is blocked! The reply button cannot be clicked. Repeatedly adjust the z-index to change the order of layers, but it is still fruitless (if there is a solution, please let me know), so we have to use js to solve it

Use javascript to adjust the scroll value

 if (window.location.hash.indexOf('#') >= 0) { $('html,body').animate({ scrollTop: ($(window.location.hash).offset().top - 50) + "px" }, 300); }; // Inaccurate positioning of main repair comments BUG $('#comments a[href^=#][href!=#]').click(function() { var target = document.getElementById(this.hash.slice(1)); if (! target) return; var targetOffset = $(target).offset().top - 50; $('html,body').animate({ scrollTop: targetOffset }, 300); return false; }); // Inaccurate positioning of main repair comments BUG

This is finally solved. It is compatible with mainstream browsers.

The next version of handsome will update this problem. If you have a better way, please let me know~

Reference article

Resolve anchor offset when using fixed navigation
After clicking the web address with anchor, how to offset the position of the web page down a short distance
Up and down offset method of anchor jump position

Last modification: March 23, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.