基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實(shí)現(xiàn)代碼(帶平滑移動的效果)
更新時間:2011年05月24日 23:08:34 作者:
從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置 如果不帶平滑移動的效果 很容易 加個 錨點(diǎn)就行了
比如 想跳到 mao.aspx 的頁面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可實(shí)現(xiàn)跳轉(zhuǎn)到指定位置
現(xiàn)在為了增加用戶體驗(yàn) 跳轉(zhuǎn)到頁面后 平滑移動到該位置 怎么做呢 其實(shí)也很簡單啦 那邊傳遞過來一個 要跳轉(zhuǎn)到哪個div的參數(shù)就行
先上一段 頁面獲取參數(shù)的 通用js
//根據(jù)參數(shù)名獲得該參數(shù) pname等于想要的參數(shù)名
function getParam(pname) {
var params = location.search.substr(1); // 獲取參數(shù) 平且去掉?
var ArrParam = params.split('&');
if (ArrParam.length == 1) {
//只有一個參數(shù)的情況
return params.split('=')[1];
}
else {
//多個參數(shù)參數(shù)的情況
for (var i = 0; i < ArrParam.length; i++) {
if (ArrParam[i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1];
}
}
}
}
代碼很簡單 就是根據(jù)當(dāng)前url 獲取其中想要的參數(shù)的值
$(function() {
var mao = $("#" + getParam("m")); //獲得錨點(diǎn)
if (mao.length > 0) {//判斷對象是否存在
var pos = mao.offset().top;
var poshigh = mao.height();
$("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000);
}
});
上面就是平滑移動到 想要的位置 pos-poshigh-30 這個是可以調(diào)整的 我是覺得減到30畢竟好~~
很簡單的效果 不上代碼例子了 自己寫著玩~
現(xiàn)在為了增加用戶體驗(yàn) 跳轉(zhuǎn)到頁面后 平滑移動到該位置 怎么做呢 其實(shí)也很簡單啦 那邊傳遞過來一個 要跳轉(zhuǎn)到哪個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) {
//只有一個參數(shù)的情況
return params.split('=')[1];
}
else {
//多個參數(shù)參數(shù)的情況
for (var i = 0; i < ArrParam.length; i++) {
if (ArrParam[i].split('=')[0] == pname) {
return ArrParam[i].split('=')[1];
}
}
}
}
代碼很簡單 就是根據(jù)當(dāng)前url 獲取其中想要的參數(shù)的值
復(fù)制代碼 代碼如下:
$(function() {
var mao = $("#" + getParam("m")); //獲得錨點(diǎn)
if (mao.length > 0) {//判斷對象是否存在
var pos = mao.offset().top;
var poshigh = mao.height();
$("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000);
}
});
上面就是平滑移動到 想要的位置 pos-poshigh-30 這個是可以調(diào)整的 我是覺得減到30畢竟好~~
很簡單的效果 不上代碼例子了 自己寫著玩~
您可能感興趣的文章:
- Vue中正確使用jQuery的方法
- jquery在vue腳手架中的使用方式示例
- vue單頁應(yīng)用中如何使用jquery的方法示例
- 詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
- vue中如何引入jQuery和Bootstrap
- jQuery實(shí)現(xiàn)將div中滾動條滾動到指定位置的方法
- jQuery實(shí)現(xiàn)在textarea指定位置插入字符或表情的方法
- js,jquery滾動/跳轉(zhuǎn)頁面到指定位置的實(shí)現(xiàn)思路
- JQuery簡單實(shí)現(xiàn)錨點(diǎn)鏈接的平滑滾動
- jQuery實(shí)現(xiàn)平滑滾動到指定錨點(diǎn)的方法
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- jQuery 錨點(diǎn)跳轉(zhuǎn)滾動條平滑滾動一句話代碼
- Vue引入jquery實(shí)現(xiàn)平滑滾動到指定位置
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery構(gòu)建函數(shù)的7種方法
jQuery把所有的操作都包裝在一個jQuery()函數(shù)中,形成了統(tǒng)一(也是惟一)的操作入口,這為jQuery操作降低了門檻。那我們來看下具體構(gòu)造函數(shù)的“七種武器”吧。2014-06-06自己動手制作基于jQuery的Web頁面加載進(jìn)度條插件
進(jìn)度條插件在GitHub上多種多樣數(shù)量繁多,這總結(jié)出頁面進(jìn)度條插件的實(shí)現(xiàn)要點(diǎn),來教大家自己動手制作基于jQuery的Web頁面加載進(jìn)度條插件2016-06-06Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實(shí)例講解)
由于Jquery中的Ajax的async默認(rèn)是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把a(bǔ)sync=false就可以了2013-11-11jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)格線繪制方法,涉及jQuery針對頁面元素的獲取及樣式動態(tài)操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06jQuery圖片滾動圖片的效果(另類實(shí)現(xiàn))
jQuery圖片滾動圖片的效果(另類實(shí)現(xiàn)),需要的朋友可以參考一下2013-06-06jquery插件如何使用 jQuery操作Cookie插件使用介紹
本文將介紹jQuery如何操作Cookie插件,需要了解的朋友可以參考下2012-12-12基于Bootstrap和jQuery構(gòu)建前端分頁工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁工具實(shí)例代碼,包括前端分頁的優(yōu)缺點(diǎn)和解決辦法,對jquery bootstrap分頁知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-11-11