基于jquery的從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置的實現(xiàn)代碼(帶平滑移動的效果)
更新時間:2011年05月24日 23:08:34 作者:
從一個頁面跳轉(zhuǎn)到另一個頁面的指定位置 如果不帶平滑移動的效果 很容易 加個 錨點就行了
比如 想跳到 mao.aspx 的頁面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可實現(xiàn)跳轉(zhuǎn)到指定位置
現(xiàn)在為了增加用戶體驗 跳轉(zhuǎn)到頁面后 平滑移動到該位置 怎么做呢 其實也很簡單啦 那邊傳遞過來一個 要跳轉(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ù)當前url 獲取其中想要的參數(shù)的值
$(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 這個是可以調(diào)整的 我是覺得減到30畢竟好~~
很簡單的效果 不上代碼例子了 自己寫著玩~
現(xiàn)在為了增加用戶體驗 跳轉(zhuǎn)到頁面后 平滑移動到該位置 怎么做呢 其實也很簡單啦 那邊傳遞過來一個 要跳轉(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ù)當前url 獲取其中想要的參數(shù)的值
復制代碼 代碼如下:
$(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 這個是可以調(diào)整的 我是覺得減到30畢竟好~~
很簡單的效果 不上代碼例子了 自己寫著玩~
您可能感興趣的文章:
- Vue中正確使用jQuery的方法
- jquery在vue腳手架中的使用方式示例
- vue單頁應用中如何使用jquery的方法示例
- 詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
- vue中如何引入jQuery和Bootstrap
- jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法
- jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法
- js,jquery滾動/跳轉(zhuǎn)頁面到指定位置的實現(xiàn)思路
- JQuery簡單實現(xiàn)錨點鏈接的平滑滾動
- jQuery實現(xiàn)平滑滾動到指定錨點的方法
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- jQuery 錨點跳轉(zhuǎn)滾動條平滑滾動一句話代碼
- Vue引入jquery實現(xiàn)平滑滾動到指定位置
相關文章
jQuery學習筆記之jQuery構建函數(shù)的7種方法
jQuery把所有的操作都包裝在一個jQuery()函數(shù)中,形成了統(tǒng)一(也是惟一)的操作入口,這為jQuery操作降低了門檻。那我們來看下具體構造函數(shù)的“七種武器”吧。2014-06-06Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
由于Jquery中的Ajax的async默認是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把async=false就可以了2013-11-11jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery插件如何使用 jQuery操作Cookie插件使用介紹
本文將介紹jQuery如何操作Cookie插件,需要了解的朋友可以參考下2012-12-12基于Bootstrap和jQuery構建前端分頁工具實例代碼
本文給大家介紹基于Bootstrap和jQuery構建前端分頁工具實例代碼,包括前端分頁的優(yōu)缺點和解決辦法,對jquery bootstrap分頁知識感興趣的朋友一起通過本文學習吧2016-11-11