jQuery中ScrollTo用法示例

本文实例讲述了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>

效果图如下:

<!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相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

时间: 2016-09-02

jQuery中Nicescroll滚动条插件的用法

本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下. Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 引入核心文件

学习使用jquery iScroll.js移动端滚动条插件

大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

jQuery插件windowScroll实现单屏滚动特效

回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也不得不向前走. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间.希望大家能多提意见与建议. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-

浅谈jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本: <script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window).scroll(function() { if ($(this).scrollTop() != 0) { $('#toT

jQuery Mobile开发中日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

jQuery iScroll.js 移动端滚动条美化插件第1/5页

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

jQuery滚动条美化插件nicescroll简单用法示例

本文实例讲述了jQuery滚动条美化插件nicescroll简单用法.分享给大家供大家参考,具体如下: 你是否遇到过这种情况:想要在网页中嵌入div块并且局部滚动,但滚动条太难看啦!!! 使用jquery.nicescroll来美化滚动条吧(so easy!!): 首先:下载jquery.nicescroll.js.百度一下哦!!!(或者像本例所示直接使用CDN地址) 然后引入jquery.nicescroll.js,并且使用: <!DOCTYPE html> <html> <

Labelauty–jQuery单选框/复选框美化插件分享

本文实例讲述了Labelauty–jQuery单选框/复选框美化插件,分享给大家供大家参考.具体如下: Labelauty–jQuery单选框/复选框美化插件,基于jQuery的一个非常小巧的插件,它除了能够实现单选框/复选框原本的选中.未选中.禁用等功能外,还能够设置选中和未选中的文本信息.标签的最小宽度等. 运行效果图:-------------------------------查看效果------------------------------------ 具体代码如下 <head>

使用jquery.qrcode.js生成二维码插件

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

基于jQuery的弹出警告对话框美化插件(警告,确认和提示)

前不久在官方网站是看见这个插件,所以今天趁有空就看了一下,随便给大家共享一下.也许你早已知道了 ,如果是这样那请跳过,不要拍砖. 这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt().这个插件有 如下这些特点: 1:这个插件可以使你可以支持你自己的css制定.使你的网站看起来更专业. 2:允许你自定义对话框的标题. 3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载. 4:这些方法都模拟

JavaScript/jQuery 表单美化插件小结

Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

vue中利用iscroll.js解决pc端滚动问题

项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件

从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

jQuery leonaScroll 1.1 自定义滚动条插件(推荐)

leonaScroll-1.1最新版 leonaScroll-1.1.js 欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! 更新:1.1版本 1.修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂 2.用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由 3.增设了滚动条宽度.上下微调按钮高度,滚动文本区域的设置 4.增设了文本内容未超出时是否显示滚动条可选设置选项