jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery实现导航滚动到指定内容效果。分享给大家供大家参考,具体如下:

做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效。

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”。

html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #a{height:800px;background:red;}
  #b{height:800px;background:green;}
  #c{height:800px;background:black;}
  #d{height:800px;background:yellow;}
  </style>
</head>
<body>
  <div class="link">
    <a href="javascript:;" onclick="scroll('a')">1111111111</a>
    <a href="javascript:;" onclick="scroll('b')">2222222222</a>
    <a href="javascript:;" onclick="scroll('c')">3333333333</a>
    <a href="javascript:;" onclick="scroll('d')">4444444444</a>
  </div>
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
  <div id="d"></div>
</body>
</html>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>
<script type="text/javascript">
function scroll(id){
  $("#"+id).ScrollTo(1000);
}
</script>

jquery.scrollto.js:

jQuery.getPos = function (e)
{
  var l = 0;
  var t = 0;
  var w = jQuery.intval(jQuery.css(e,'width'));
  var h = jQuery.intval(jQuery.css(e,'height'));
  var wb = e.offsetWidth;
  var hb = e.offsetHeight;
  while (e.offsetParent){
    l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
    t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
    e = e.offsetParent;
  }
  l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
  t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
  return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
};
jQuery.getClient = function(e)
{
  if (e) {
    w = e.clientWidth;
    h = e.clientHeight;
  } else {
    w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
    h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
  }
  return {w:w,h:h};
};
jQuery.getScroll = function (e) 
{
  if (e) {
    t = e.scrollTop;
    l = e.scrollLeft;
    w = e.scrollWidth;
    h = e.scrollHeight;
  } else {
    if (document.documentElement && document.documentElement.scrollTop) {
      t = document.documentElement.scrollTop;
      l = document.documentElement.scrollLeft;
      w = document.documentElement.scrollWidth;
      h = document.documentElement.scrollHeight;
    } else if (document.body) {
      t = document.body.scrollTop;
      l = document.body.scrollLeft;
      w = document.body.scrollWidth;
      h = document.body.scrollHeight;
    }
  }
  return { t: t, l: l, w: w, h: h };
};
jQuery.intval = function (v)
{
  v = parseInt(v);
  return isNaN(v) ? 0 : v;
};
jQuery.fn.ScrollTo = function(s) {
  o = jQuery.speed(s);
  return this.each(function(){
    new jQuery.fx.ScrollTo(this, o);
  });
};
jQuery.fx.ScrollTo = function (e, o)
{
  var z = this;
  z.o = o;
  z.e = e;
  z.p = jQuery.getPos(e);
  z.s = jQuery.getScroll();
  z.clear = function(){clearInterval(z.timer);z.timer=null};
  z.t=(new Date).getTime();
  z.step = function(){
    var t = (new Date).getTime();
    var p = (t - z.t) / z.o.duration;
    if (t >= z.o.duration+z.t) {
      z.clear();
      setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
    } else {
      st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
      sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
      z.scroll(st, sl);
    }
  };
  z.scroll = function (t, l){window.scrollTo(l, t)};
  z.timer=setInterval(function(){z.step();},13);
};

调用方法:

$(id).ScrollTo(speed);
//id是跳转到内容的id;speed是滚动速度,值越大,滚动越慢

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
js实现简单进度条效果
Mar 25 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
You might like
php学习之流程控制实现代码
2011/06/09 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
页面使用密码保护代码
2013/04/10 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
在python中pandas的series合并方法
2018/11/12 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
小学家长会邀请函
2014/01/23 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
525心理活动总结
2014/07/04 职场文书
干部对照检查材料范文
2014/08/26 职场文书
地球一小时活动总结
2015/02/27 职场文书
计算机专业自荐信
2015/03/05 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python