锚点跳转距离顶部指定距离

缺点url后缀中会添加#xxx； 刷新会有问题
html

<a href="#maodian">点这里跳</a>
<div id="maodian">跳到这里</div> 

js+jquery

         window.onhashchange=function(){
             var target = $(location.hash);
             if(target.length==1){
                 var top = target.offset().top-120;// 距离顶部120像素
                 if(top > 0){
                     $('html,body').animate({scrollTop: top}, 1000);//带jq动画的跳转
                    //$('html,body').css({scrollTop: top}) //不带jq动画的跳转
                 }
             }
         };

解决上一个方法的问题
html

<a href="javascript:" id="maodian" onclick="topMao(this.id)">您的德州扑克水平</a>
<div id="maodiana">
            <h2>标题</h2>
            <p>内容</p>
</div>

js(jquery);

function topMao(e){
        document.querySelector("#"+e+"a").scrollIntoView(true);
        var target = $("#"+e+"a");
        var top = target.offset().top-120;// 距离顶部120像素
        if(top > 0) {
            $('html,body').animate({scrollTop: top}, 1000);//带jq动画的跳转
            //$('html,body').css({scrollTop: top}) //不带jq动画的跳转
        }
}