缺點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動畫的跳轉(zhuǎn)
//$('html,body').css({scrollTop: top}) //不帶jq動畫的跳轉(zhuǎn)
}
}
};
解決上一個方法的問題
html
<a href="javascript:" id="maodian" onclick="topMao(this.id)">您的德州撲克水平</a>
<div id="maodiana">
<h2>標題</h2>
<p>內(nèi)容</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動畫的跳轉(zhuǎn)
//$('html,body').css({scrollTop: top}) //不帶jq動畫的跳轉(zhuǎn)
}
}