您现在的位置是：网站首页> 编程资料编程资料

JavaScript中通用的jquery动画滚屏实例_javascript技巧_

2023-05-24 282人已围观

简介 JavaScript中通用的jquery动画滚屏实例_javascript技巧_

在网站页面上，点击某个超链接，页面跳转到某个位置，跳转过程有一个动画滚动效果，这是一种比较酷的体验。这种效果是如何实现的呢，本文通过实际代码来详解实现方法。

网页代码

滚屏效果技术代码
间隔
技术
返回顶部
代码
返回顶部

这里主要用到了jquery的animate方法，实现思路是，当点击某个超链接时，通过jquery的animate将屏幕滚动到某个位置。注意animate函数的两个参数，一个是滚动位置，一个是动画滚动的时间毫秒。

$('#tech').on("click", function () { $('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800); return false; });

虽然实现了效果，这里有个问题，如果滚动的超链接较多，那么就要写不少重复代码，还要注意滚动位置不要写错。下面通过改变一下jquery选择器来优化代码。

滚屏效果技术代码
间隔
技术
返回顶部
代码
返回顶部

可以看出，通过使用jquery class选择器，并使用jquery的this对象获取滚动目标，明显减少了代码，代码看起来更加清楚。

到此这篇关于JavaScript中通用的jquery动画滚屏实例的文章就介绍到这了,更多相关JS jquery动画滚屏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue利用sync语法糖实现modal弹框的项目实践_vue.js_