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 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
浅析vue-router原理
2018/10/19 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python中encode()方法的使用简介
2015/05/18 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
浅析Django中关于session的使用
2019/12/30 Python
信号生成及DFT的python实现方式
2020/02/25 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
出生公证委托书
2014/04/03 职场文书
委托书的写法
2014/09/16 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
微信小程序调用python模型
2022/04/21 Python