标签：实例 preview chrome class jquery header width logo http
smoothscroll是一款jQuery插件，可以平滑地滚动到指定的地方。
可以解决chrome锚点失效的问题。
官方网站 http://iamdustan.com/smoothscroll/
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>
示例图片
标签：实例 preview chrome class jquery header width logo http
原文地址：https://www.cnblogs.com/q2546/p/10966701.html
