jQuery实现通用平滑滚动动画效果详解

作者：白露时间：2026-10-25 16:44:44浏览：253

本文详解如何利用jQuery的animate方法实现点击链接后的页面平滑滚动效果。通过对比初始代码与基于class选择器的优化方案，展示了如何减少重复代码并提高可维护性，适用于需要提升用户体验的网页开发场景。

实现效果

在网页交互中，点击超链接后页面平滑滚动至指定位置，能带来良好的用户体验。本文将通过具体代码解析该功能的实现原理。

实现代码

网页代码

<!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方法。当用户点击链接时，脚本计算目标位置并执行滚动动画。需注意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选择器并结合this对象动态获取滚动目标，显著精简了代码量，使逻辑更加清晰易读。

以上就是关于JavaScript中利用jQuery实现通用动画滚屏的完整介绍，更多相关JS及jQuery动画滚屏内容可参考本站往期文章或继续浏览后续内容，感谢支持。

作者最新文章

AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题

2026-11-05 17:02:26

sigma.js 怎么实现节点点击、拖拽与悬停提示交互

2026-11-05 15:03:27

Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染

2026-11-05 13:43:48

主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比

2026-11-05 09:28:19

JavaScript点击事件监听与交互效果实例

2026-11-05 09:10:19