從一個頁面跳轉到另一個頁面的指定位置（帶平滑移動的效果）

從一個頁面跳轉到另一個頁面的指定位置 如果不帶平滑移動的效果 很容易 加個 錨點就行了  比如 想跳到 mao.aspx 的頁面 的div id="s" 的位置    那麼   只用<a href="mao.aspx#s">  就可實現跳轉到指定位置

 

現在為了增加使用者體驗  跳轉到頁面後  平滑移動到該位置  怎麼做呢  其實也很簡單啦  那邊傳遞過來一個 要跳轉到哪個div的參數就行

 

先上一段 頁面擷取參數的 通用js

 

//根據參數名獲得該參數 pname等於想要的參數名<br /> function getParam(pname) {</p><p> var params = location.search.substr(1); // 擷取參數 平且去掉？<br /> var ArrParam = params.split('&');<br /> if (ArrParam.length == 1) {<br /> //只有一個參數的情況<br /> return params.split('=')[1];<br /> }<br /> else {<br /> //多個參數參數的情況<br /> for (var i = 0; i < ArrParam.length; i++) {<br /> if (ArrParam[i].split('=')[0] == pname) {</p><p> return ArrParam[i].split('=')[1];<br /> }<br /> }<br /> }</p><p> }

 

代碼很簡單 就是根據當前url 擷取其中想要的參數的值

 

$(function() {<br /> var mao = $("#" + getParam("m")); //獲得錨點<br /> if (mao.length > 0) {//判斷對象是否存在<br /> var pos = mao.offset().top;<br /> var poshigh = mao.height();<br /> $("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000);<br /> }<br /> });

上面就是平滑移動到 想要的位置     pos-poshigh-30 這個是可以調整的 我是覺得減到30畢竟好~~

 

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