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实现平滑滚动到指定锚点的方法。分享给大家供大家参考。
时间： 2024-10-11 10:49:49