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 相关文章推荐
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 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
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP生成随机密码类分享
2014/06/25 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
mongodb和php的用法详解
2019/03/25 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
python中 logging的使用详解
2017/10/25 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python实现像awk一样分割字符串
2020/09/15 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
用python计算文件的MD5值
2020/12/23 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
个人查摆剖析材料
2014/02/04 职场文书
前处理班长职位说明书
2014/03/01 职场文书
投资建议书模板
2014/05/12 职场文书