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 getJSON 处理json数据的代码
Jul 26 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
js查错流程归纳
May 04 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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
解析crontab php自动运行的方法
2013/06/24 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Element Input输入框的使用方法
2020/07/26 Javascript
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python绘制随机网络图形示例
2019/11/21 Python
浅析Python __name__ 是什么
2020/07/07 Python
Python如何对齐字符串
2020/07/30 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
幼儿园新学期寄语
2014/01/18 职场文书
施工安全标语
2014/06/07 职场文书
电气工程师岗位职责
2015/02/12 职场文书
亮剑观后感
2015/06/05 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL