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

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

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

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

h5代码:

<a href="javascript:void(0)" onclick="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)" 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的更多相关文章

  1. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

  2. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  3. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  6. jquery.nicescroll完美滚动条使用方法

    配置参数 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是"#000000" cur ...

  7. 微软专家推荐11个Chrome 插件

    Web开发人员,需要长时间使用浏览器,尽管Windows10 Edge浏览器启动非常快速,且支持110多种设备,Edge支持基于JS 扩展,但也删除了很多旧功能像Active-X等插件.多数情况下,插 ...

  8. 前端那点事儿——Tocify自动生成文档目录

    今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目录的焦点. 效果 框架 原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面 ...

  9. jQuery Tocify 定位导航

    Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...

随机推荐

  1. P3384——树链剖分&&模板

    题目描述 链接 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: ...

  2. Chrome和Safari浏览器preventDefault报treated as passive错误

    Chrome和Safari浏览器preventDefault报treated as passive错误 问题代码是: document.addEventListener('touchmove', fu ...

  3. oracle汉字排序

    oracle在9i之前是对汉字的排序是按照二进制编码进行排序的,很不适合我们的国情,在oracle9i之后,汉字的排序方式有了以下三种方式:        1.使用拼音排序   NLS_SORT=SC ...

  4. python中函数的参数传递小结

    “”“ 函数的参数 --必须参数,默认参数,组合参数 --函数我作为参数 --对象作为参数 --*args  可变参数 --**kwargs关键字参数 “”” def function1(a,b,*a ...

  5. OBDSTAR X300 PRO3详细评论

    OBDSTAR 公司的X300 PRO3钥匙主控系统具有SKP900的防盗锁钥匙编程功能,以及新功能,例如,测速计调节,EEPROM / PIC和OBDII.它的风格完全符合工业惯例,例如,它采用双边 ...

  6. Luogu P2516 [HAOI2010]最长公共子序列 DP

    首先$LIS$显然:$f[i][j]=max(f[i][j-1],f[i-1][j],(a[i]==b[j])*f[i-1][j-1])$ 考虑如何转移数量: 首先,不管$a[i]$是否等于$b[j] ...

  7. 'telnet' is not recognized as an internal or external command

     http://blog.csdn.net/lubinsu/article/details/7294870 使用telnet的时候出现如下提示:'telnet' is not recognized ...

  8. linux系统编程--线程

    安装线程man page,命令:sudo apt-get install manpages-posix-dev 线程概念 什么是线程 LWP:light weight process 轻量级的进程,本 ...

  9. （八）树控件(Tree Control)，标签控件(tab control)

    树控件 基于对话框创建工程 // 01_TreeCtrlDlg.cpp : 实现文件 // #include "stdafx.h" #include "01_TreeCt ...

  10. docker-compose部署微服务

    1.安装docker-compose curl -L https://github.com/docker/compose/releases/download/1.23.2/docker-compose ...