<!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() 方法可把內(nèi)容滾動到指定的坐標(biāo)。
語法
scrollTo(xpos,ypos)
參數(shù) 描述
xpos  必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)。
ypos  必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo)。
-->
<body onload="scrollTo(0,200);">
<div style="height:200px; background:#f60;">
  <p>導(dǎo)航</p>
</div>
<div style=" height:2000px; background:#06f;">
  <p>內(nèi)容</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">產(chǎn)品展示</a></li>
  <li><a href="javascript:void();" class="nav_news">新聞中心</a></li>
  <li><a href="javascript:void();" class="nav_ser">服務(wù)支持</a></li>
  <li><a href="javascript:void();" class="nav_con">聯(lián)系我們</a></li>
  <li><a href="javascript:void();" class="nav_job">人才招聘</a></li>
</ul>
<div id="pro" class="box">
  <h3>產(chǎn)品展示</h3>
</div>
<div id="news" class="box">
  <h3>新聞中心</h3>
</div>
<div id="ser" class="box">
  <h3>服務(wù)支持</h3>
</div>
<div id="con" class="box">
  <h3>聯(lián)系我們</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>

效果圖如下：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery中l(wèi)ast()方法用法實(shí)例
這篇文章主要介紹了jQuery中l(wèi)ast()方法用法,實(shí)例分析了last()方法獲取匹配元素集合中的最后一個元素時的使用技巧,需要的朋友可以參考下
2015-01-01
用jQuery向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄胘Query向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測試下。
2010-04-04
JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
三種數(shù)據(jù)格式中最簡單的就是html格式，返回回來以后可以直接使用,上面的處理方式就是json的處理方式xml的處理方式。
2010-07-07
jquery 事件執(zhí)行檢測代碼
在寫Web 應(yīng)用，或者Web Ajax功能的時候我們經(jīng)常需要處理事件，jquery已經(jīng)非常完美的封裝了事件，但是有時候事件的執(zhí)行順序還是會有微小差別
2009-12-12
jQuery的鏈?zhǔn)讲僮魇侨绾螌?shí)現(xiàn)的？為什么要用鏈?zhǔn)讲僮鳎拷酉聛頃椭蠹医鉀Q這兩個問題，感興趣的朋友可以了解下
2013-01-01