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


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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
javascript中Object使用详解
Jan 26 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 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
Linux编译升级php的详细方法
2013/11/04 PHP
分享php分页的功能模块
2015/06/16 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
AngularJS快速入门
2015/04/02 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python做反被爬保护的方法
2019/07/01 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
护士个人简历自荐信
2013/10/18 职场文书
机关节能减排实施方案
2014/03/17 职场文书
班级年度安全计划书
2014/05/01 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
目标责任书格式
2014/07/28 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
岗位职责范本大全
2015/02/26 职场文书
培训简讯范文
2015/07/20 职场文书
Elasticsearch 批量操作
2022/04/19 Python