一个bug引发的模拟锚点定位写法

锚点定位大家肯定都熟悉，a标签通过id绑定直接跳转到相对应的位置

近期一个项目收尾阶段需要一个系统问答的页面，上面是问题下面是解答，自然想到用 锚点定位。

此页面通过iframe嵌套在其他页面中，在嵌入后引发一个问题点击问题跳到相对应的答案位置后，整个页面向上移动了20多px。导航栏被遮挡住一部分。

所有用jq模拟了锚点定位先上马

$('.que_con').click(function(e){//父元素添加点击
                console.log(e.target.nodeName)
                if(e.target.nodeName =='A'){//点击的是锚点的时候
                    e.preventDefault()//阻止原有默认行为
                    var id = $(e.target).attr('href')//获取要跳转的对应元素的id
                    var top = $(''+id).offset().top;//获取对应元素位置
                    $(document).scrollTop(top)//滚动到其位置
                    // document.querySelector(''+id).scrollIntoView()//次方法会导致同样bug
                }
            })

起初考虑到锚点定位会在url后拼接#+id，猜测可能是url改变导致了此问题，所有改用

document.querySelector(''+id).scrollIntoView()方法，此方法不会在url后拼接id，结果还是不行。最后换用上面的方法才ok。
此方法虽然解决了问题，但可以说不是从根本上解决的。现在只能说这个bug和滚动条跳转的方式有关系，更深层的原因还没有找到。如果后续找到了根本原因在继续更新本文