分享一个经典平滑滚动jQuery特效

王小优
王小优
王小优
231
文章
0
评论
2015年10月28日
评论
3,509 1258字阅读4分11秒

本篇使用jQuery animate创建平滑滚动效果,效果可以滚动到顶部、到底部或页面中指定地方,滚动过程非常平滑,用户体验佳!

在页面设计中,有时候需要创建一些点击滚动的效果,如:返回顶部;点击导航栏滚动到指定版块等。较为简单方便的就是采用锚点进行页面跳转,如<a href="#bottom">直接滚动到ID为bottom的底部版块,但整个滚动过程较为生硬。本文使用jQuery animate特效,实现平滑的滚动效果。

分享一个经典平滑滚动jQuery特效

下面是jQuery代码:

  1. <script type="text/javascript">
  2. jQuery(document).ready(function($) {
  3. $(".scroll").click(function(event){
  4. event.preventDefault();
  5. $('html,body').animate({scrollTop:$('.demo').offset().top},1000);
  6. });
  7. });
  8. </script>

注意:要先引入jQuery库。

上述代码可以简述为:当我们点击一个类名为“scroll”的元素时,将发生页面滑动,滑动位置为类名为“demo”的元素处,整个过程持续1000毫秒。

其中.scroll .demo 1000根据实际情况进行更改。

返回顶部样例

$('.demo').offset().top的意思是类名为demo的元素垂直偏移页面顶部的距离,那么返回顶部的代码应该这样的:

  1. <script type="text/javascript">
  2. jQuery(document).ready(function($) {
  3. $(".top").click(function(event){
  4. event.preventDefault();
  5. $('html,body').animate({scrollTop:'0px'},1000);
  6. });
  7. });
  8. </script>

<a>标签锚点定位

如果你想使用<a href="#demo">锚点定位来处理平滑滚动,如点击导航栏滑动到指定版块,那么有一个更高效的代码:

  1. <script type="text/javascript">
  2. jQuery(document).ready(function($) {
  3. $(".scroll").click(function(event){
  4. event.preventDefault();
  5. $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
  6. });
  7. });
  8. </script>

其中$(this.hash)指的就是被点击这个<a>标签的锚点值,例如我要点击<a href="#demo" class="scroll"></a>这个元素,那么页面将会滑动到id为demo的元素处。这段代码的优势就是自动选择锚点值,只需部署一次JS,即可实现多处点击的效果。

本例代码使用场景广泛,效果体验友好,是一段非常经典的jQuery特效,但记得先引入jQuery库文件。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
接入百度云加速后解析企业邮箱教程 好文资讯

接入百度云加速后解析企业邮箱教程

昨天试了一下百度云加速,导致企业邮箱发送失败,原因是并没有正确解析邮箱导致的。我用的阿里企业邮箱,企业邮箱后台提示需要到DNS服务商添加邮箱解析。 这里以阿里云企业邮箱为例,进入企业邮箱管理,设置解析...
什么是OPCM、OCPC、OCPA广告? 好文资讯

什么是OPCM、OCPC、OCPA广告?

如果你作为广告主当你在做头条、百度信息流广告投放的时候,会看到出价策略有OPCM、OCPC、OCPA,这些是什么意思呢?跟CPM、CPC、CPA有什么不同? 想必大家都知道广告类型分CPC、CPM、C...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: