smoothscroll

最新推荐文章于 2024-05-23 14:48:13 发布

weixin_30480651

最新推荐文章于 2024-05-23 14:48:13 发布

阅读量890

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/q2546/p/10966701.html

版权

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

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

官方网站 http://iamdustan.com/smoothscroll/

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

h5代码:

<a href="javascript:void(0)" οnclick="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)" οnclick="gotoTest1()">首页</a></li>
                <li><a href="javascript:void(0)" οnclick="gotoTest2()">购物</a></li>
                <li><a href="javascript:void(0)" οnclick="gotoTest3()">博客</a></li>
                <li><a href="javascript:void(0)" οnclick="gotoTest4()">服务</a></li>
                <li><a href="javascript:void(0)" οnclick="gotoTest5()">联系我们</a></li>
                <li><a href="javascript:void(0)" οnclick="gotoTest6()">关于我们</a></li>
                <li><a href="javascript:void(0)" οnclick="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>

示例图片

转载于:https://www.cnblogs.com/q2546/p/10966701.html

weixin_30480651

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
smoothscroll

smoothscroll是一款jQuery插件，可以平滑地滚动到指定的地方。可以解决chrome锚点失效的问题。官方网站http://iamdustan.com/smoothscroll/github地址https://github.com/iamdustan/smoothscrollh5代码:<a href="javascript:void(0)" onclic...
复制链接

扫一扫