zoukankan html css js c++ java

jQuery 插件 smoothscroll

smoothscroll 是一款 jQuery插件，可以平滑地滚动到指定的地方。

可以解决chrome锚点失效的问题。

下载源码网站 https://github.com/iamdustan/smoothscroll

css代码：

1 <link href="http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin" rel="stylesheet" type="text/css">
2     <link rel="stylesheet" href="css/common.min.css">
3     <link rel="stylesheet" href="css/okayNav.min.css">

js代码：

function gotoTest1(){
            document.querySelector('#home').scrollIntoView({ behavior: 'smooth' });
        }

完整代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 
 7     <title>平滑滚动</title>
 8 
 9     <link href="http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin" rel="stylesheet" type="text/css">
10     <link rel="stylesheet" href="css/common.min.css">
11     <link rel="stylesheet" href="css/okayNav.min.css">
12     
13     
14 </head>
15 <body>
16 
17     <header id="header" class="okayNav-header">
18         <a class="okayNav-header__logo" href="#">
19            Logo
20         </a>
21 
22         <nav role="navigation" id="nav-main" class="okayNav">
23             <ul>
24                 <li><a href="#">首页</a></li>
25                 <li><a href="#shop">购物</a></li>
26                 <li><a href="#blog">博客</a></li>
27                 <li><a href="#service">服务</a></li>
28                 <li><a href="#connect">联系我们</a></li>
29                 <li><a href="#about">关于我们</a></li>
30                 <li><a href="javascript:void(0)" onclick="gotoTest()">测试</a></li>
31             </ul>
32         </nav>
33     </header><!-- /header -->
34 
35     <main>
36         <h1>Resize your browser to preview okayNav</h1>
37     </main>
38     
39     
40     <section id="shop" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
41     <h1>shop</h1>
42     
43     </section>
44     
45     
46     <section id="blog" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
47     <h1>blog</h1>
48     
49     </section>    
50     
51     
52     <section id="service" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
53     <h1>service</h1>
54     
55     </section>    
56         
57     <section id="connect" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
58     <h1>connect</h1>
59     
60     </section>    
61     
62     <section id="about" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
63     <h1>about</h1>
64     
65     </section>        
66     
67     <section id="test" style="min-height:700px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">>
68     <h1>test</h1>
69     
70     </section>        
71     
72     <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
73     <script src="js/jquery.okayNav-min.js"></script>
74     <script src="js/smoothscroll.js"></script>
75 
76     <script type="text/javascript">
77         var navigation = $('#nav-main').okayNav();
78         
79         function gotoTest(){
80             document.querySelector('#test').scrollIntoView({ behavior: 'smooth' });
81         }
82     </script>
83 </body>
84 </html>

运行结果：

查看全文

相关阅读:
Nginx详解（正向代理、反向代理、负载均衡原理）
java List的初始化
 nginx配置实现负载均衡
 SQL中where与having的区别
 数据库中where与having区别~~~
group by的使用
 wm_concat函数
 Nginx配置upstream实现负载均衡1
Nginx配置upstream实现负载均衡
 java

原文地址：https://www.cnblogs.com/lsyw/p/11055598.html