鼠标点击动态滚动指定位置jQuery特效

　　jQuery控制页面按顺序滚动至指定位置，与滚动条的功能是不一样的，本代码中，当点击标号1的时候，页面会滚动至标号2，当点击标号2，会滚动至标号3，当标号3会回到标号1，也就是循环滚动，有意思吧，这当然比浏览器自带的滚动条有意思哦。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>jQuery控制页面滚动 - 烈火学院 Liehuo.Net</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" /><br /> <style><br /> html, body {<br /> margin: 0;<br /> padding: 0;<br /> height: 100%;<br /> width: 100%;<br /> }<br /> html, body, input {<br /> font-family: Helvetica, Arial, Sans-Serif;<br /> font-size: 16px;<br /> }<br /> div.slide {<br /> width: 100%;<br /> height: 100%;<br /> overflow: hidden;<br /> }<br /> div.slide h1 {<br /> margin: 0;<br /> padding: 0.5em;<br /> }<br /> div.slide ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> div.slide li {<br /> margin: 0.5em;<br /> padding: 0 0.5em;<br /> line-height: 1.25em;<br /> }<br /> </style><br /> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script><br /> <script><br /> $(function(){<br /> //判断是否有DOCTYPE声明，有与没有，scrollTop不一样<br /> var scrollPos;<br /> if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {<br /> scrollPos = document.documentElement;<br /> }<br /> else if (typeof document.body != 'undefined') {<br /> scrollPos = document.body;<br /> }<br /> //给标题添加单击事件<br /> $("h1").click(function(){<br /> var nextH1 = $(this).parent().next();<br /> if ( nextH1.length ) { //判断是否是最后一个<br /> var next_top = nextH1.offset().top;<br /> $(scrollPos)<br /> .animate({ scrollTop : next_top }, "slow");<br /> }else{<br /> var first_top = $("div.slide:first").offset().top;<br /> $(scrollPos)<br /> .animate({ scrollTop : first_top }, "slow");<br /> }<br /> });<br /> });<br /> </script><br /> </head><br /> <body><br /> <div class="slide"><br /> <h1>标号One</h1><br /> <ul><br /> <li>OneOneOneOne</li><br /> <li>OneOneOneOne</li><br /> <li>OneOneOneOne</li><br /> </ul><br /> </div><br /> <div class="slide"><br /> <h1>标号Two</h1><br /> <ul><br /> <li>TwoTwoTwo</li><br /> <li>TwoTwoTwo</li><br /> <li>TwoTwoTwo</li><br /> </ul><br /> <div style="width:468px; margin:15px auto;"><br /> </div><br /> </div><br /> <div class="slide"><br /> <h1>标号Three</h1><br /> <ul><br /> <li>ThreeThreeThree.</li><br /> <li>ThreeThreeThree.</li><br /> <li>ThreeThreeThree.</li><br /> </ul><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

鼠标点击动态滚动指定位置jQuery特效

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

鼠标点击动态滚动指定位置jQuery特效

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀