smoothscroll

Posted 2021-12-18 q2546

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了smoothscroll相关的知识，希望对你有一定的参考价值。

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

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

github地址 https://github.com/iamdustan/smoothscroll

h5代码:

<a href="javascript:void(0)" onclick="gotoTest1()">首页</a>

JS代码

1 function gotoTest1()
2             document.querySelector(‘#home‘).scrollIntoView( behavior: ‘smooth‘ );
3

完整实例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>okayNav Demo</title>
 
    <link href="http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/common.min.css">
    <link rel="stylesheet" href="css/okayNav.min.css">
     
     
</head>
<body>
 
    <header id="header" class="okayNav-header">
        <a class="okayNav-header__logo" href="#">
           Logo
        </a>
 
        <nav role="navigation" id="nav-main" class="okayNav">
            <ul>
                <li><a href="javascript:void(0)" onclick="gotoTest1()">首页</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest2()">购物</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest3()">博客</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest4()">服务</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest5()">联系我们</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest6()">关于我们</a></li>
                <li><a href="javascript:void(0)" onclick="gotoTest7()">测试</a></li>
            </ul>
        </nav>
    </header><!-- /header -->
 
    <main>
        <h1 id="home" >Resize your browser to preview okayNav</h1>
    </main>
     
     
    <section id="shop" style="min-height:620px;background-color:#777">
    <h1 style="padding-top:100px;">shop</h1>
     
    </section>
     
     
    <section id="blog" style="min-height:620px;background-color:#236777">
    <h1 style="padding-top:100px;">blog</h1>
     
    </section>    
     
     
    <section id="service" style="min-height:620px;background-color:red">
    <h1 style="padding-top:100px;">service</h1>
     
    </section>    
         
    <section id="connect" style="min-height:620px;background-color:#25fb65">
    <h1 style="padding-top:100px;">connect</h1>
     
    </section>    
     
    <section id="about" style="min-height:620px;background-color:#66fb65">
    <h1 style="padding-top:100px;">about</h1>
     
    </section>        
     
    <section id="test" style="min-height:620px;background-color:#e34565">
    <h1 style="padding-top:100px;">test</h1>
     
    </section>        
     
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="js/jquery.okayNav-min.js"></script>
    <script src="js/smoothscroll.js"></script>
 
    <script type="text/javascript">
        var navigation = $(‘#nav-main‘).okayNav();
         function gotoTest1()
            document.querySelector(‘#home‘).scrollIntoView( behavior: ‘smooth‘ );
        function gotoTest2()
            document.querySelector(‘#shop‘).scrollIntoView( behavior: ‘smooth‘ );
        function gotoTest3()
            document.querySelector(‘#blog‘).scrollIntoView( behavior: ‘smooth‘ );
        function gotoTest4()
            document.querySelector(‘#service‘).scrollIntoView( behavior: ‘smooth‘ );
        function gotoTest5()
            document.querySelector(‘#connect‘).scrollIntoView( behavior: ‘smooth‘ );
        function gotoTest6()
            document.querySelector(‘#about‘).scrollIntoView( behavior: ‘smooth‘ );
        
        function gotoTest7()
            document.querySelector(‘#test‘).scrollIntoView( behavior: ‘smooth‘ );
        
    </script>
</body>
</html>

示例图片

技术图片

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

jQuery 插件 smoothscroll

UITableView(_UITableViewPrivate) _smoothscroll: 负责啥？

javascript SmoothScroll

javascript smoothscroll

javascript jQuery_SmoothScroll

html smoothscroll