基於jquery的從一個頁面跳轉到另一個頁面的指定位置的實現代碼(帶平滑移動的效果)

來源:互聯網
上載者:User

比如 想跳到 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畢竟好~~

很簡單的效果 不上代碼例子了 自己寫著玩~

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.