不用锚点也可以平滑滚动到页面的指定位置实现代码


Posted in Javascript onMay 08, 2013

不用锚点也可以平滑滚动到页面的指定位置

<!DOCTYPE html> 
<html > 
<head> 
<meta content="text/html; charset=utf-8" /> 
<title>ScrollTo:平滑滚动到页面指定位置</title> 
<link rel="stylesheet" type="text/css" href="../css/main.css" /> 
<style type="text/css"> 
.nav{width:500px;margin:10px 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} 
.clear{clear:both} 
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} 
a{color:#007bc4/*#424242*/; text-decoration:none;} 
a:hover{text-decoration:underline} 
ol,ul{list-style:none} 
table{border-collapse:collapse;border-spacing:0} 
body{height:100%; font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background:#162934 url(../images/body_bg.gif) repeat-x} 
img{border:none} 
#main{width:910px; min-height:600px; margin:30px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;} 
h2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript" src="http://jt.875.cn/js/scrollto.js"></script> 
<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> 
</head> 
<body> 
<div id="main"> 
<h2 class="top_title">ScrollTo:平滑滚动到页面指定位置</h2> 
<ul class="nav"> 
<li><a href="#" class="nav_pro">产品展示</a></li> 
<li><a href="#" class="nav_news">新闻中心</a></li> 
<li><a href="#" class="nav_ser">服务支持</a></li> 
<li><a href="#" class="nav_con">联系我们</a></li> 
<li><a href="#" class="nav_job">人才招聘</a></li> 
</ul> 
<div class="clear"></div> 
<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" style="height:680px"> 
<h3>人才招聘</h3> 
</div> 
</div> 
</body> 
</html>

JS 插件:scroll to
Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 #Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 #Javascript
jquery插件validate验证的小例子
May 08 #Javascript
jQuery ui插件的使用方法代码实例
May 08 #Javascript
js模拟select下拉菜单控件的代码
May 08 #Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
php连接mysql数据库代码
2009/03/10 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP目录操作实例总结
2016/09/27 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
开学典礼致辞
2015/07/29 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书