Why is this position not correct?

problem description

for example, when you click on the aiming point G, you want to bring a little animation effect to bring the G on the right back to the top, but the animation is there, and the position obtained is not accurate

.

clipboard.png

related codes

/ / Please paste the code text below (do not replace the code with pictures)

$(document) .on ("click",".letterList li",function () {

)
                var top= $($(this).children("a").attr("href")).offset().top - 53;
                 $(".cityList").animate({
                    scrollTop: top
                }, 500);
                console.log($($(this).children("a").attr("href")),$(this).children("a").attr("href"));
            });

Mar.28,2021


G id="letterG"
  a href="letterG"
Menu