欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery網(wǎng)頁內(nèi)滑動緩沖導(dǎo)航的實現(xiàn)代碼

 更新時間：2015年04月05日 23:07:00   投稿：mdxy-dxy  
這篇文章主要介紹了Jquery網(wǎng)頁內(nèi)滑動緩沖導(dǎo)航的實現(xiàn)代碼,實現(xiàn)滑動緩沖的方式實現(xiàn)頁內(nèi)導(dǎo)航，用戶體驗大大提升需要的朋友可以參考下

如果網(wǎng)頁過長，需要頁內(nèi)導(dǎo)航的時候，我們一般是在目標(biāo)出設(shè)置ID，比如<div id="footer"></div>，然后在當(dāng)前頁面某個鏈接地址設(shè)置如：<a href="#footer">點擊指向到底部</a>，這樣點擊該鏈接后就會馬上轉(zhuǎn)到網(wǎng)頁底部，默認(rèn)是直接轉(zhuǎn)到底部，有的訪客會莫名其妙，怎么突然就到底部了。

　　在越來越關(guān)注用戶體驗的今天，這點我們要解決，下面就是一段簡單的Jquery代碼，實現(xiàn)滑動緩沖的方式實現(xiàn)頁內(nèi)導(dǎo)航，用戶體驗大大提升！

下面是代碼：

<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">
jQuery.fn.anchorGoWhere = function(options){
  var obj = jQuery(this);
  var defaults = {target:0, timer:500};
  var o = jQuery.extend(defaults,options);
  obj.each(function(i){
   jQuery(obj[i]).click(function(){
    var _rel = jQuery(this).attr("href").substr(1);
    switch(o.target){
     case 1:
      var _targetTop = jQuery("#"+_rel).offset().top;
      jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
      break;
     case 2:
      var _targetLeft = jQuery("#"+_rel).offset().left;
      jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
      break;
    }
   return false;
   });
  });
 };
 
$("#mybtn").anchorGoWhere({target:1}); //這里是點擊按鈕的ID
</script>

以上就是網(wǎng)頁內(nèi)滑動緩沖導(dǎo)航的實現(xiàn)代碼，希望大家以后多多支持腳本之家。

相關(guān)文章

  • jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例

    jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例

    這篇文章主要給大家介紹了關(guān)于jquery中封裝函數(shù)傳遞當(dāng)前元素的方法，文中給出了詳細(xì)的示例代碼，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
    2017-05-05
  • jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度

    jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度

    這篇文章主要介紹了通過jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下
    2014-07-07
  • jQuery實現(xiàn)基本淡入淡出效果的方法詳解

    jQuery實現(xiàn)基本淡入淡出效果的方法詳解

    這篇文章主要介紹了jQuery實現(xiàn)基本淡入淡出效果的方法,結(jié)合實例形式詳細(xì)分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制頁面元素淡入淡出顯示效果的相關(guān)操作技巧,需要的朋友可以參考下
    2018-09-09
  • Jquery 動態(tài)生成表格示例代碼

    Jquery 動態(tài)生成表格示例代碼

    在某些特殊的情況下是需要動態(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯過
    2013-12-12
  • jquery插件star-rating.js實現(xiàn)星級評分特效

    jquery插件star-rating.js實現(xiàn)星級評分特效

    Bootstrap Star Rating是一個簡單而強大的jQuery插件實現(xiàn)星級分?jǐn)?shù)評級。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。
    2015-04-04
  • jQuery的one()方法用法實例

    jQuery的one()方法用法實例

    這篇文章主要介紹了jQuery的one()方法用法,實例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個一次性的事件處理方法使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery連綴語法如何實現(xiàn)

    jquery連綴語法如何實現(xiàn)

    我想熟悉javascript的沒有不知道jquery的吧，不得不提的就是特有的連綴書寫語法了，jquery連綴語法如何實現(xiàn)，接下來將詳細(xì)介紹
    2012-11-11
  • 寫出高效jquery代碼的19條指南

    寫出高效jquery代碼的19條指南

    討論jQuery和javascript性能的文章并不罕見。然而，本文我計劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會帶來速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗
    2014-03-03
  • jquery表單驗證插件validation使用方法詳解

    jquery表單驗證插件validation使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了jquery表單驗證插件validation使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01

最新評論