jQuery中ScrollTo用法示例
2019/6/27 22:10:11
本文主要是介绍jQuery中ScrollTo用法示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了jQuery中ScrollTo用法。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <!-- scrollTo() 方法可把内容滚动到指定的坐标。 语法 scrollTo(xpos,ypos) 参数 描述 xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 --> <body onload="scrollTo(0,200);"> <div style="height:200px; background:#f60;"> <p>导航</p> </div> <div style=" height:2000px; background:#06f;"> <p>内容</p> </div> </body> </html>
效果图如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript" src="jquery.scrollTo.js"></script> <style type="text/css"> .nav{width:500px; height:40px; margin:20px auto;} .nav li{float:left; width:100px; height:24px; line-height:24px} .box{height:500px} .box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px} #pro,#ser,#job{ background-color:#f60;} #news,#con{ background:#06f;} </style> </head> <body> <ul class="nav"> <li><a href="javascript:void();" class="nav_pro">产品展示</a></li> <li><a href="javascript:void();" class="nav_news">新闻中心</a></li> <li><a href="javascript:void();" class="nav_ser">服务支持</a></li> <li><a href="javascript:void();" class="nav_con">联系我们</a></li> <li><a href="javascript:void();" class="nav_job">人才招聘</a></li> </ul> <div id="pro" class="box"> <h3>产品展示</h3> </div> <div id="news" class="box"> <h3>新闻中心</h3> </div> <div id="ser" class="box"> <h3>服务支持</h3> </div> <div id="con" class="box"> <h3>联系我们</h3> </div> <div id="job" class="box"> <h3>人才招聘</h3> </div> <script type="text/javascript"> $(function(){ $(".nav_pro").click(function(){ $.scrollTo('#pro',500); }); $(".nav_news").click(function(){ $.scrollTo('#news',800); }); $(".nav_ser").click(function(){ $.scrollTo('#ser',1000); }); $(".nav_con").click(function(){ $.scrollTo('#con',1200); }); $(".nav_job").click(function(){ $.scrollTo('#job',1500); }); }); </script> </body> </html>
效果图如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
这篇关于jQuery中ScrollTo用法示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-20Vue资料入门教程:从零开始学习Vue.js
- 2024-09-20Vuex4入门教程:轻松掌握Vue状态管理
- 2024-09-20Element-Plus入门指南:轻松构建美观的Vue组件
- 2024-09-20VueRouter4入门教程:轻松掌握Vue路由
- 2024-09-20Vuex4入门教程:轻松掌握Vue状态管理
- 2024-09-20Vue3课程:新手入门与初级教程详解
- 2024-09-20Vue3课程:新手入门到初级实战指南
- 2024-09-20Vuex4学习:一步一步搭建你的第一个Vuex状态管理库
- 2024-09-19Vue项目中实现TagsView标签栏导航的简单教程
- 2024-09-19Vue3入门指南:基础教程与实战项目