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

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

点这里跳
跳到这里

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

您的德州扑克水平

标题

内容

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动画的跳转
        }
}

你可能感兴趣的:(锚点跳转距离顶部指定距离)