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


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实现的立体文字渐变效果
May 17 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jquery datatable服务端分页
Aug 31 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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中的empty和isset函数
2016/05/26 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
node实现基于token的身份验证
2018/04/09 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python分析作业提交情况
2017/11/22 Python
python学生信息管理系统实现代码
2019/12/17 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
总经理的岗位职责
2014/02/23 职场文书
结婚喜宴主持词
2014/03/14 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
优秀教研组申报材料
2014/12/26 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
围城读书笔记
2015/06/26 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
实用求职信模板范文
2019/05/13 职场文书