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 相关文章推荐
关于JavaScript的with 语句的使用方法
May 09 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
基于vue.js实现购物车
Jan 15 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
移动端JS实现拖拽两种方法解析
Oct 12 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
浅谈php调用python文件
2019/03/29 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python日期操作学习笔记
2008/10/07 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
详解python3中的真值测试
2018/08/13 Python
解读python如何实现决策树算法
2018/10/11 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
会计工作心得体会
2014/01/13 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
个人查摆剖析材料
2014/02/04 职场文书
党风廉政建设责任书
2014/04/14 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
离职证明格式样本
2015/06/12 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书