本文详解如何利用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动画滚屏内容可参考本站往期文章或继续浏览后续内容，感谢支持。