jQuery中ScrollTo用法示例


Posted in Javascript onSeptember 04, 2016

本文实例讲述了jQuery中ScrollTo用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<!--
scrollTo() 方法可把内容滚动到指定的坐标。
语法
scrollTo(xpos,ypos)
参数 描述
xpos  必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos  必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
-->
<body onload="scrollTo(0,200);">
<div style="height:200px; background:#f60;">
  <p>导航</p>
</div>
<div style=" height:2000px; background:#06f;">
  <p>内容</p>
</div>
</body>
</html>

效果图如下:

jQuery中ScrollTo用法示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ScrollTo:平滑滚动到页面指定位置</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<style type="text/css">
.nav{width:500px; height:40px; 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,#job{ background-color:#f60;}
#news,#con{ background:#06f;}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="javascript:void();" class="nav_pro">产品展示</a></li>
  <li><a href="javascript:void();" class="nav_news">新闻中心</a></li>
  <li><a href="javascript:void();" class="nav_ser">服务支持</a></li>
  <li><a href="javascript:void();" class="nav_con">联系我们</a></li>
  <li><a href="javascript:void();" class="nav_job">人才招聘</a></li>
</ul>
<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">
  <h3>人才招聘</h3>
</div>
<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>
</body>
</html>

效果图如下:

jQuery中ScrollTo用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
JS函数重载的解决方案
May 13 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JQuery球队选择实例
May 18 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 #Javascript
JS简单测试循环运行时间的方法
Sep 04 #Javascript
You might like
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP中each与list用法分析
2016/01/08 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
JSF界面控制层技术
2013/06/17 面试题
财务信息服务专业自荐书范文
2014/02/08 职场文书
通用自荐信范文
2014/03/14 职场文书
业务内勤岗位职责
2014/04/30 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
行风评议整改报告
2014/11/06 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
人民检察院起诉书
2015/05/20 职场文书
民事答辩状格式范文
2015/05/21 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
Java实现简单小画板
2022/06/10 Java/Android