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


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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
javascript 模拟点击广告
Jan 02 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
js+canvas实现验证码功能
Sep 21 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
vue组件创建的三种方式小结
Feb 03 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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
星际争霸任务指南——神族
2020/03/04 星际争霸
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP闭包函数详解
2016/02/13 PHP
javascript 跳转代码集合
2009/12/03 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python 多线程应用介绍
2012/12/19 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python中的编码知识整理汇总
2016/01/26 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
外语专业毕业生自我评价分享
2013/10/05 职场文书
合作意向书格式及范文
2014/03/31 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
毕业大学生自荐信
2014/06/17 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
小学语文教学反思范文
2016/03/03 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js