smoothscroll

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

dianlu5775

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

阅读量707

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/max-hou/p/10964330.html

版权

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

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

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

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

h5代码:

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

JS代码

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

完整实例

<!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/max-hou/p/10964330.html

dianlu5775

关注

0
点赞
踩
0

收藏

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

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

扫一扫