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