jQuery中ScrollTo用法示例

2019-11-20 09:05:15

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

效果圖如下：