JavaScript中通用的jquery动画滚屏实例
作者：北京王老师??????? 时间：2024-04-22 22:22:34
实现效果
在网站页面上，点击某个超链接，页面跳转到某个位置，跳转过程有一个动画滚动效果，这是一种比较酷的体验。这种效果是如何实现的呢，本文通过实际代码来详解实现方法。
实现代码
网页代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滚屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow" rel="external nofollow" >技术</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow" rel="external nofollow" >代码</a>
</div>
<div style="background-color: gray;height: 600px;">
<h1>间隔</h1>
</div>
<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技术</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回顶部</a>
</div>
<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代码</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回顶部</a>
</div>
</body>
<script>
$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});
$('#code').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-code').offset().top}, 800);
return false;
});
$('#tohead').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
$('#tohead1').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
</script>
</html>
这里主要用到了jquery的animate方法，实现思路是，当点击某个超链接时，通过jquery的animate将屏幕滚动到某个位置。注意animate函数的两个参数，一个是滚动位置，一个是动画滚动的时间毫秒。
$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});
虽然实现了效果，这里有个问题，如果滚动的超链接较多，那么就要写不少重复代码，还要注意滚动位置不要写错。下面通过改变一下jquery选择器来优化代码。
优化代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滚屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow" rel="external nofollow" >技术</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow" rel="external nofollow" >代码</a>
</div>
<div style="background-color: gray;height: 600px;">
<h1>间隔</h1>
</div>
<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技术</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回顶部</a>
</div>
<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代码</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回顶部</a>
</div>
</body>
<script>
$('.scroll-a').on("click", function () {
let scrollto = $(this).attr('href');
$('html,body').animate({scrollTop:$(scrollto).offset().top}, 800);
return false;
});
</script>
</html>
可以看出，通过使用jquery class选择器，并使用jquery的this对象获取滚动目标，明显减少了代码，代码看起来更加清楚。
来源：https://blog.51cto.com/livestreaming/5512072
标签：JavaScript,jquery,动画,滚屏
0
投稿猜你喜欢
php fopen()函数案例详解
2023-07-16 22:21:26
SqlServer 执行计划及Sql查询优化初探
2024-01-14 23:03:01
使用Python中Tkinter模块的Treeview 组件显示ini文件操作
2022-05-23 03:45:38
Pandas读存JSON数据操作示例详解
2022-05-24 08:14:03
php数组查询元素位置的实例方法
2024-05-02 17:34:06
Python OpenCV一个窗口中显示多幅图像
2023-12-09 19:38:04
python函数map()和partial()的知识点总结
2023-10-04 14:58:11
github pull最新代码实现方法
2023-11-22 10:08:07
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
2024-05-28 15:55:14
MySQL数据表分区策略及优缺点分析
2024-01-22 05:37:19
python opencv摄像头的简单应用
2023-01-17 14:25:56
使用 Python 实现微信公众号粉丝迁移流程
2022-05-10 21:02:07
使用SQL语句将相同名的多行字段内容拼接(方法详解)
2024-01-15 00:11:13
js简单的分页器插件代码实例
2024-04-29 13:23:22
ajax(iframe)无刷新提交表单、上传文件
2024-04-17 10:39:47
SQL Server中元数据函数的用法
2024-01-20 16:26:54
php mysql获取表字段名称和字段信息的三种方法
2023-11-18 22:47:26
一篇文章快速了解Python的GIL
2021-04-23 00:25:23
Informatica bulk与normal模式的深入详解
2024-01-16 01:30:28
python 还原梯度下降算法实现一维线性回归
2023-10-09 21:53:42
