jQuery 插件 smoothscroll

Posted 2021-12-19 lszw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
41     <h1>shop</h1>
42     
43     </section>
44     
45     
46     <section id="blog" style="min-height:700px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
47     <h1>blog</h1>
48     
49     </section>    
50     
51     
52     <section id="service" style="min-height:700px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
53     <h1>service</h1>
54     
55     </section>    
56         
57     <section id="connect" style="min-height:700px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
58     <h1>connect</h1>
59     
60     </section>    
61     
62     <section id="about" style="min-height:700px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
63     <h1>about</h1>
64     
65     </section>        
66     
67     <section id="test" style="min-height:700px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
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>

运行结果：

技术图片

以上是关于jQuery 插件 smoothscroll的主要内容，如果未能解决你的问题，请参考以下文章

smoothscroll

javascript jQuery_SmoothScroll

VS推荐插件

jQuery响应式内容滑块插件bxslider

UITableView(_UITableViewPrivate) _smoothscroll: 负责啥？