网站开发石家庄,番禺做网站价格,网站建设与管理基础,上海模板建站平台ScrollTo是一款基于jQuery的滚动插件#xff0c;当点击页面的链接时#xff0c;可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多#xff0c;页面长度有好几屏的场合#xff0c;本文以DEMO为示例讲解该插件的应用。查看演示DEMO使用方法1#xff0d;准备jQuery库…ScrollTo是一款基于jQuery的滚动插件当点击页面的链接时可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多页面长度有好几屏的场合本文以DEMO为示例讲解该插件的应用。查看演示DEMO使用方法1准备jQuery库和scrollTo.js插件。2XHTML产品展示新闻中心服务支持联系我们人才招聘产品展示新闻中心服务支持联系我们人才招聘我们用一个页面展示导航和导航对应的每个模块。3CSS.nav{width:500px;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{background:url(img/bg.jpg)}#news,#con{background:url(img/bg2.gif)}4使用scrollTo.js插件$(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);});});当点击导航按钮时触发scrollTo方法$.scrollTo带有两个参数第一个是指定要滚动的目的ID第二个参数是滚动时间间隔以毫秒为单 位。在本例中只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动传冲效果等具体可以参照官方网站的例子 http://demos.flesler.com/jquery/scrollTo/
