Jquery网页内滑动缓冲导航的实现代码


Posted in Javascript onApril 05, 2015

如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了。

在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用户体验大大提升!

下面是代码:

<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>

以上就是网页内滑动缓冲导航的实现代码,希望大家以后多多支持三水点靠木。

Javascript 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
简单谈谈js的数据类型
Sep 25 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 #Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 #Javascript
javascript Array 数组常用方法
Apr 05 #Javascript
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php实现zip文件解压操作
2015/11/03 PHP
php pdo操作数据库示例
2017/03/10 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
django的ORM操作 增加和查询
2019/07/26 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python中私有属性的定义方式
2020/03/05 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python多线程thread及模块使用实例
2020/04/28 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
什么是python的自省
2020/06/21 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
C语言基础笔试题
2013/04/27 面试题
自我评价范文
2013/12/22 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
五好家庭申报材料
2014/12/20 职场文书
地陪导游欢迎词
2015/01/26 职场文书
上诉答辩状范文
2015/05/22 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL