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

2017-5-2 12:14 来自本站原创 28,555 8 4
[摘要]

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

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

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

下面是jQuery代码:

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

注意:要先引入jQuery库。

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

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

返回顶部样例

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

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

<a>标签锚点定位

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

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

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

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

本文最后更新于2017年5月2日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:8   其中:访客  0   博主  0
    加载中...
    1. 7年前 (2017-05-11) 0楼

      不错的分享,值得学习

    2. 7年前 (2017-05-08) 0楼

      [强] 有机会试一试这个方法。

    3. 7年前 (2017-05-05) 0楼

      想请问下博主的代码高亮是怎么实现的,是用了什么插件吗

    4. 7年前 (2017-05-04) 0楼

      特来拜访,留个脚印!

    5. 7年前 (2017-05-04) 0楼

      没有演示,不科学呀!

    6. 7年前 (2017-05-03) 0楼

      这个·做法的确挺好的

    7. 7年前 (2017-05-03) 0楼

      这个做法还是挺实用的,学习了

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 8 4 28,555
    Top