比如 想跳到 mao.aspx 的頁面 的div id="s" 的位置 那麼 只用<a href="mao.aspx#s"> 就可實現跳轉到指定位置
現在為了增加用戶體驗 跳轉到頁面後 平滑移動到該位置 怎麼做呢 其實也很簡單啦 那邊傳遞過來一個 要跳轉到哪個div的參數就行
先上一段 頁面獲取參數的 通用js
代碼如下:
//根據參數名獲得該參數 pname等於想要的參數名
function getParam(pname) {
var params = location.search.substr(1); // 獲取參數 平且去掉？
var ArrParam = params.split('&');
if (ArrParam.length == 1) {
//只有一個參數的情況
return params.split('=')[1];
}
else {
//多個參數參數的情況
for (var i = 0; i < ArrParam.length; i++) {
if (ArrParam[i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1];
}
}
}
}
代碼很簡單 就是根據當前url 獲取其中想要的參數的值
代碼如下:
$(function() {
var mao = $("#" + getParam("m")); //獲得錨點
if (mao.length > 0) {//判斷對象是否存在
var pos = mao.offset().top;
var poshigh = mao.height();
$("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000);
}
});
上面就是平滑移動到 想要的位置 pos-poshigh-30 這個是可以調整的 我是覺得減到30畢竟好~~
很簡單的效果 不上代碼例子了 自己寫著玩~