当前位置:  编程技术>WEB前端

使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)

    来源: 互联网  发布时间:2014-08-25

    本文导语:  采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。 滚动到顶部: 代码如下:$('.scroll_top').click(functi...

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。

滚动到顶部:

代码如下:
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置:

代码如下:
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


完整实例源码参考:

代码如下:





js平滑滚动到顶部、底部、指定地方


 .box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
 .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};






产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍






 

返回顶部


 

产品介绍


 

滑到底部




 jQuery(document).ready(function($){
  $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
  $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
  $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
 });



    
 
 

您可能感兴趣的文章:

  • 使用sh脚本如何替换指定目录下所有文件中的指定字符串
  • 在ACC下不使用循环怎样实现,读取文件指定行的数据.
  • 如何使用perl删除指定文件
  • gdb使用list时,如何指定要查看的文件
  • 静态库动态库同时存在时,如何指定使用静态库
  • 如何在 shell 中使用一行命令,结束指定名称的进程
  • linux如何限制指定进程的内存使用量?
  • 如何指定使用静态库libstdc++.a而不是动态库libstdc++.so
  • 使用sftp的mget 命令怎么指定本地的目录?
  • 请大家帮忙,怎样使用ResultSet对象的absolute()方法来提取指定行的数据?
  • 基于使用递归推算指定位数的斐波那契数列值的解决方法
  • linux使用tcpdump命令监视指定网络数据包的方法
  • Redhat使用mount指定mount /home 之后不能用su 切换到别的用户,这是为什么?
  • c#不使用系统api实现可以指定区域屏幕截屏功能
  • 如何实现只有指定的计算机可以登录系统?(系统为JSP+EJB,使用者跨多个网段)
  • 正则表达式问题,使用正则表达式找出指定字符串并替换?
  • 我的LINUX要加塊硬盤.如何將新的硬盤空間給系統(指定目錄)使用?
  • java使用iterator遍历指定目录示例分享
  • 怎么使用socket与指定IP和端口下的服务通讯
  • java使用TimerTask定时器获取指定网络数据
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 关于使用cron不能创建文件
  • 使用mdev不能自动在dev下创建节点
  • 使用 JS 创建 GUI 应用 slfsrv
  • php使用mkdir创建多级目录入门例子
  • 继续问:使用Motif库的OverrideShell创建的窗口怎么放在屏幕的中央?
  • linux使用shell脚本,如何创建用户,并设置用户密码?能否给出示例?
  • .a库的创建和使用问题
  • 如何使用kdevelop创建动态共享库程序,请高手指点
  • 我如何使用mknod命令创建这样的一个文件?
  • python使用循环实现批量创建文件夹示例
  • Linux上能创建限制使用磁盘空间的用户吗?
  • 哪位有使用XML创建可排序、分页的数据显示页面的例程?多多指教噢!
  • 急!如何销毁一个使用gtk_window_new创建的窗口
  • 为什么在x-win32的窗口中,不能使用KDevelop,创建QT工程??
  • 使用Motif开发Solaris上的开发,如何创建一个不带标题栏的窗口,就像启动画面一样?
  • 请问posix IPC中使用mq_open()创建消息队列的问题?
  • 请教高高手:如何规划和创建数据池?并使用数据池?有资料也行
  • Linux下使用MyEclipse6.0打开window下创建的文本时中文部分出现乱码
  • java线程之使用Runnable接口创建线程的方法
  • java多线程编程之使用runnable接口创建线程
  • C++ I/O 成员 tellg():使用输入流读取流指针
  • 在测试memset函数的执行效率时,分为使用Cash和不使用Cash辆种方式,该如何控制是否使用缓存?
  • C++ I/O 成员 tellp():使用输出流读取流指针
  • 求ibm6000的中文使用手册 !从来没用过服务器,现在急需使用它,不知如何使用! 急!!!!!
  • Python不使用print而直接输出二进制字符串
  • 请问:在使用oracle数据库作开发时,是使用pro*c作开发好些,还是使用库函数如oci等好一些啊?或者它们有什么区别或者优缺点啊?
  • Office 2010 Module模式下使用VBA Addressof
  • 急求结果!!假设一个有两个元素的信号量集S,表示了一个磁带驱动器系统,其中进程1使用磁带机A,进程2同时使用磁带机A和B,进程3使用磁带机B。
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • c#中SAPI使用总结——SpVoice的使用方法
  • tcmalloc内存泄露优化c++开源库下载,安装及使用介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3