基于jquery的從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的指定位置的實(shí)現(xiàn)代碼（帶平滑移動(dòng)的效果）

更新時(shí)間：2011年05月24日 23:08:34 作者：

從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的指定位置如果不帶平滑移動(dòng)的效果很容易加個(gè) 錨點(diǎn)就行了

比如想跳到 mao.aspx 的頁面的div id="s" 的位置那么只用<a href="mao.aspx#s"> 就可實(shí)現(xiàn)跳轉(zhuǎn)到指定位置
現(xiàn)在為了增加用戶體驗(yàn) 跳轉(zhuǎn)到頁面后平滑移動(dòng)到該位置怎么做呢其實(shí)也很簡(jiǎn)單啦那邊傳遞過來一個(gè) 要跳轉(zhuǎn)到哪個(gè)div的參數(shù)就行
先上一段頁面獲取參數(shù)的通用js

復(fù)制代碼代碼如下:

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

代碼很簡(jiǎn)單就是根據(jù)當(dāng)前url 獲取其中想要的參數(shù)的值

復(fù)制代碼代碼如下:

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

上面就是平滑移動(dòng)到想要的位置 pos-poshigh-30 這個(gè)是可以調(diào)整的我是覺得減到30畢竟好~~

很簡(jiǎn)單的效果不上代碼例子了自己寫著玩~

您可能感興趣的文章:

頁面跳轉(zhuǎn)

相關(guān)文章

Jquery cookie插件實(shí)現(xiàn)原理代碼解析
這篇文章主要介紹了Jquery cookie插件實(shí)現(xiàn)原理代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
jquery獲取被勾選的checked(選中)的那一行的3列和4列的值
大家可能會(huì)遇到這種需求通過jquery獲取被勾選的checked的那一行的3列和4列的值，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
jquery修改網(wǎng)頁背景顏色通過css方法實(shí)現(xiàn)
在瀏覽一些網(wǎng)站，尤其是一些小說網(wǎng)站的時(shí)候，都會(huì)有修改頁面背景顏色的地方，這個(gè)是用jquery可以做到
2014-06-06
當(dāng)jquery ajax遇上401請(qǐng)求的解決方法
下面小編就為大家?guī)硪黄?dāng)jquery ajax遇上401請(qǐng)求的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果,需要的朋友可以參考下
2014-06-06
jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能,詳細(xì)介紹了相應(yīng)jQuery事件的用法實(shí)例,需要的朋友可以參考下
2014-09-09
jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-01-01
jQuery日期范圍選擇器附源碼下載
jQuery Date Range Picker是一款允許用戶選擇一個(gè)日期時(shí)間范圍的jQuery日期選擇器插件。下面通過本文給大家分享jQuery日期范圍選擇器的實(shí)現(xiàn)思路，需要的的朋友參考下吧
2017-05-05
jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
這篇文章主要介紹了jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能,涉及jQuery結(jié)合datatables插件針對(duì)頁面表格實(shí)現(xiàn)數(shù)據(jù)加載及增刪改查等相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jquery.validate 自定義驗(yàn)證方法及validate相關(guān)參數(shù)
jquery.validate是一個(gè)基于jquery的非常優(yōu)秀的驗(yàn)證框架，我們可以通過它迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，而且對(duì)國(guó)際化也有非常好的支持，通過本文給大家介紹jquery.validate 自定義驗(yàn)證方法及validate相關(guān)參數(shù)，需要的朋友一起學(xué)習(xí)吧
2016-01-01