JQ滚动特效
Posted JiaHua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ滚动特效相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>JQ滚动特效</title> 9 <style type="text/css"> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 a{ 15 text-decoration: none; 16 } 17 ul,li{ 18 list-style: none; 19 } 20 .header{ 21 height: 300px; 22 } 23 .header ul li{ 24 float: left; 25 padding: 20px; 26 margin-right: 20px; 27 background-color: #FFC0CB; 28 } 29 .content div{ 30 height: 300px; 31 border: 1px solid pink; 32 } 33 </style> 34 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 35 <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script> 36 <script type="text/javascript"> 37 38 /*锚点滚动特效function封装*/ 39 $(function(){ 40 $(‘a[href*=#],area[href*=#]‘).click(function() { 41 if (location.pathname.replace(/^\//, ‘‘) == this.pathname.replace(/^\//, ‘‘) && location.hostname == this.hostname) { 42 var $target = $(this.hash); 43 $target = $target.length && $target || $(‘[name=‘ + this.hash.slice(1) + ‘]‘); 44 if ($target.length) { 45 var targetOffset = $target.offset().top; 46 $(‘html,body‘).animate({ 47 scrollTop: targetOffset 48 }, 49 1000); 50 return false; 51 } 52 } 53 }); 54 }) 55 </script> 56 </head> 57 58 <body> 59 <div class="warpper"> 60 <!--nav--> 61 <div class="header"> 62 <ul> 63 <li><a href="#content1">qqqqq</a></li> 64 <li><a href="#content2">qqqqq</a></li> 65 <li><a href="#content3">qqqqq</a></li> 66 <li><a href="#content4">qqqqq</a></li> 67 <li><a href="#content5">qqqqq</a></li> 68 </ul> 69 </div> 70 71 72 <div class="content"> 73 <div id="content1"> 74 <h1>54666645646565</h1> 75 </div> 76 <div id="content2"> 77 <h1>54666645646565</h1> 78 </div> 79 <div id="content3"> 80 <h1>54666645646565</h1> 81 </div> 82 <div id="content4"> 83 <h1>54666645646565</h1> 84 </div> 85 <div id="content5"> 86 <h1>54666645646565</h1> 87 </div> 88 </div> 89 90 91 92 </div> 93 </body> 94 </html>
jQuery实现平滑滚动到指定锚点的方法。分享给大家供大家参考。
以上是关于JQ滚动特效的主要内容，如果未能解决你的问题，请参考以下文章
求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部，离开可继续滚动