jQuery实现页面内锚点平滑跳转特效的方法总结


Posted in Javascript onMay 11, 2015

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" /> 
<style type="text/css"> 
#hovertree { 
height: 800px; 
background: red; 
text-align:center;color:white; 
} 
 
#keleyi { 
height: 800px; 
background: green;text-align:center;color:white; 
} 
 
#myslider { 
height: 800px; 
background: black;text-align:center;color:white; 
} 
 
#zonemenu { 
height: 800px; 
background: yellow;text-align:center; 
} 
 
.keleyilink{position:fixed;} 
.keleyilink a {text-decoration:none;} 
</style> 
</head> 
<body> 
<div class="keleyilink"> 
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> 
<a href="javascript:scroll('keleyi');" target="_self">KKK</a> 
<a href="javascript:scroll('myslider');" target="_self">myslider</a> 
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> 
</div> 
<div id="hovertree">hovertree 
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a> 
</div> 
<div id="keleyi">3water</div> 
<div id="myslider">myslider</div> 
<div id="zonemenu">zonemenu</div> 
<script src="jquery/jquery-1.11.3.min.js"></script> 
<script src="jquery.hovertreescroll.js"></script> 
<script> 
function scroll(id) { 
$("#" + id).HoverTreeScroll(1000); 
} 
</script> 
</body> 
</html>

更简单点的实现方法:

代码只有一句话

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

animate()方法用来实现一组css的自定义动画,有两种调用方法

第一种形式接受4个参数,如下所示

.animate( properties [, duration] [, easing] [, complete] )

properties ? 一个包含样式属性及值的映射
duration ? 可选的速度参数,既可以是预置的字符串,也可以是一个毫秒数值
easing ? 可选的缓动类型,jquery默认的只有两种:swing和linear,要使用其它效果需要安装缓动类的插件
complete ? 可选的回调函数,在动画结束时被调用

第一种形式的示例如下

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

本文实现锚点跳转的代码使用了第一种形式

$("html,body")代表对html或body元素进行动画,即要改变他们的css属性值
scrollTop是要改变的属性值,表示滚动条滑过的距离,在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度,它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。
1000是指动画时间为1秒

animate()方法还有第二种调用形式

.animate( properties, options )

一个是属性映射,一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中,同时又添加了两个选项。第二种形式的代码如下:

.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
JS实现简易留言板特效
Dec 23 Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 #Javascript
javascript实现获取字符串hash值
May 10 #Javascript
Javascript实现计算个人所得税
May 10 #Javascript
AngularJS基础知识笔记之表格
May 10 #Javascript
AngularJS基础知识笔记之过滤器
May 10 #Javascript
浅谈下拉菜单中的Option对象
May 10 #Javascript
You might like
PHP编程函数安全篇
2013/01/08 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
如何使用Python调整图像大小
2020/09/26 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
医院护士的求职信
2014/01/03 职场文书
英语道歉信范文
2014/01/09 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
公司考勤管理制度
2015/08/04 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书