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 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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编程网上资源导航
2006/10/09 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
List Installed Hot Fixes
2007/06/12 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
js实现登录验证码
2016/12/22 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
Vue精简版风格概述
2018/01/30 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
python列表的逆序遍历实现
2020/04/20 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
汇源肾宝广告词
2014/03/20 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
golang 实现并发求和
2021/05/08 Golang