万博体育ManBetX手机版

欢迎访问

云南万博信息技术有限公司官方网站,云南网站建设诚信品牌!

万博网络,云南万博信息技术有限公司

万博客服热线

DING HAO COLUMN 万博专栏

万博的一些分享
Sharing from Ding Hao

  • 万博服务
  • 1

ScrollTo:平滑滚动到页面指定位置

来源:     2013年07月02日17:02
字号:T|T

ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用。

查看演示DEMO

使用方法

1、准备jQuery库和scrollTo.js插件。


2、XHTML



产品展示

新闻中心

服务支持

联系我们

人才招聘

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

.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(/jQuery/img/bg.jpg)}
#news,#con{background:url(/jQuery/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还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子

客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心