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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
Vue中使用clipboard实现复制功能
Sep 05 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
python删除列表内容
2015/08/04 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python I/O与进程的详细讲解
2019/03/08 Python
基于Python测试程序是否有错误
2020/05/16 Python
python 模拟登录B站的示例代码
2020/12/15 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
植树节活动总结
2014/04/30 职场文书
农村门前三包责任书
2014/07/25 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
考试作弊检讨书
2014/10/21 职场文书
2014年村官工作总结
2014/11/24 职场文书
采购员岗位职责
2015/02/03 职场文书
党小组考察意见
2015/06/02 职场文书