jQuery中滚动到用法示例

本文实例讲述了jQuery中滚动到用法。分享给大家供大家参考，具体如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta 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背景# f60'p导航/p/div div style=' height :2000 px；背景# 06f'p内容/p/div/body/html效果图如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleScrollTo:平滑滚动到页面指定位置/title脚本类型=' text/JavaScript ' src=' http : jquery-1。10 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。滚动到。js '/脚本样式类型=' text/CSS ' .nav { width:500px高度：40 px余量：20px汽车；}.导航li { float:left宽度宽度：100像素宽度：24像素线高：24px} .方框{height:500px} .盒子h3 { height:32px线高：32 px左填充left :20 pxfont-size :14 px } # pro，#ser，# job {底色： # f60} #新闻，# con { background : # 06f }/style/head dyul class=' nav ' lia href=' JavaScript : void()；'class='nav_pro '产品展示/a/Li lia href=' JavaScript : void()；'class='nav_news '新闻中心/a/Li lia href=' JavaScript : void()；'class='nav_ser '服务支持/a/Li lia href=' JavaScript : void()；'class='nav_con '联系我们/a/Li lia href=' JavaScript : void()；'class='nav_job '人才招聘/a/Li/uldiv id=' pro ' class=' box '产品展示/H3/div id=' news ' class=' box ' H3新闻中心/H3/div id=' ser ' class=' box ' H3服务支持/H3/div id=' con ' class=' box ' H3联系我们/H3/div id=' job ' class=' box ' H3人才招聘/H3/div脚本类型=' text/JavaScript ' $(function(){ $(').nav _ pro ').单击(函数(){ $).scrollTo('#pro '，500)；});$('.nav _ news’).单击(函数(){ $).滚动至(' news #，800)；});$('.nav _ ser’).单击(函数(){ $).scrollTo('#ser '，1000)；});$('.nav _ con ').单击(函数(){ $).scrollTo('#con '，1200)；});$('.nav _ job’).单击(函数(){ $).scrollTo('#job '，1500)；});});/脚本/正文/html效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。