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]点出统计器
Oct 11 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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 str_replace的替换漏洞
2008/03/15 PHP
php查看session内容的函数
2008/08/27 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
javascript引导程序
2008/10/26 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
浅谈js中的闭包
2015/03/16 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
python 图片验证码代码
2008/12/07 Python
python Django模板的使用方法(图文)
2013/11/04 Python
python海龟绘图实例教程
2014/07/24 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
pandas 将索引值相加的方法
2018/11/15 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
使用Django清空数据库并重新生成
2020/04/03 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
群众路线批评与自我批评
2014/02/06 职场文书
工程质量月活动方案
2014/02/19 职场文书
环境保护标语
2014/06/20 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server