使用jqueryanimate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。
滚动到顶部:
滚动到指定位置:
完整实例源码参考:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js平滑滚动到顶部、底部、指定地方</title>
<scripttype="text/javascript"src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style>
.box{height:200px;width:100%;background:#ccc;margin:10px0;}
.location{position:fixed;right:0;bottom:10px;width:20px;background:#FFC;padding:5px;cursor:pointer;color:#003};
</style>
</head>
<body>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="boxa">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
<divclass="boxbottom"></div>
<divclass="location">
<pclass="scroll_top">返回顶部</p>
<pclass="scroll_a">产品介绍</p>
<pclass="scroll_bottom">滑到底部</p>
</div>
<scripttype="text/javascript">
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);});
});
</script>
</body>
</html>
相关文章
- IOS系统平刷工具Semi-Restore使用教程
- 怎样使用pycharm创建py格式文件_课程创建是什么奖
- Redis 的安装使用
- 【说站】java中Stream的使用流程及注意
- 使用 OGG 21c 遇到的几个问题
- 关于 Linux 中使用 systemd-run 创建临时 cgroup 限制 ad-hoc 资源消耗的一些笔记
- 【错误记录】创建密钥报错 ( Key was created with errors: Warning: JKS 密钥库使用专用格式。建议使用 “ keyto “ 迁移到行业标准格式 PKCS12 )
- 使用hexo创建自己的博客
- 【Java SE】方法的使用
- Linux中使用crond工具创建定时任务的方法
- 使用MySQL:如何使用被包含的字段(mysql字段被包含)
- Oracle 视图 ALL_ATTRIBUTE_DIM_KEYS 官方解释,作用,如何使用详细说明
- Oracle 视图 ALL_JOIN_IND_COLUMNS 官方解释,作用,如何使用详细说明
- Oracle 视图 DBA_CERTIFICATES 官方解释,作用,如何使用详细说明
- Oracle 视图 V$SECUREFILE_TIMER 官方解释,作用,如何使用详细说明
- 使用Oracle工具导出脚本文件(oracle导出脚本文件)
- Scribus 是一个桌面排版(DTP)软件,是一个以GNU通用公共许可证发布的自由软件。提供Linux、Unix、Mac OS X、OS/2以及微软Windows上运行的原生版本。它以其广泛的页面布局功能堪比于其他非自由应用程序,如PagePlus、QuarkXPress和Adobe InDesign。Scribus 灵活的布局和排版,并有编写档案专业品质图像设置设备的能力。它也可以创建动画和互动的PDF图像和形式。示例使用包括撰写小报纸、小册子、简报、海报和书籍。
- 如何使用Linux的ln s命令创建符号链接(linuxlns)
- 轻松学会使用Linux命令创建文件夹(linux命令创建文件夹)
- 使用MongoDB创建高效表格(mongodb创建表)
- Scribus 是一个桌面排版(DTP)软件,是一个以GNU通用公共许可证发布的自由软件。提供Linux、Unix、Mac OS X、OS/2以及微软Windows上运行的原生版本。它以其广泛的页面布局功能堪比于其他非自由应用程序,如PagePlus、QuarkXPress和Adobe InDesign。Scribus 灵活的布局和排版,并有编写档案专业品质图像设置设备的能力。它也可以创建动画和互动的PDF图像和形式。示例使用包括撰写小报纸、小册子、简报、海报和书籍。
- 从零开始:学习使用MySQL建立数据库(创建mysql数据库命令)
- 轻松登录,Redis带你畅游网络世界(登录使用redis)
- 深入了解Oracle中使用的字符集(oracle使用的字符集)
- 使用Redis实现外部访问权限(redis 设置外部访问)
- JS正则表达式字面量和使用newRegExp构造函数创建的正则表达式有什么区别
- js的匿名函数使用介绍