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. 置换的玩笑——DFS&&暴力

    题目 链接 题意:一个$1$到$n$的序列被去掉空格,需要将其还原.例如$4111109876532$可还原成$4 \ 1 \  11 \  10 \  9 \  8 \  7 \  6 \  5 \ ...

  2. 【LuoguP4482】[BJWC2018]Border 的四种求法

    题目链接 题意 区间 boder \(n,q\leq 2*10^5\) Sol (暴力哈希/SA可以水过) 字符串区间询问问题,考虑用 \(SAM\) 解决. boder相当于是询问区间 \([l,r ...

  3. pe头

    1.dos头 结构: struct _IMAGE_DOS_HEADER {     WORD e_magic;     WORD e_cblp;     WORD e_cp;     WORD e_c ...

  4. css(name|pro|[,val|fn])

    css(name|pro|[,val|fn]) 概述 访问匹配元素的样式属性.大理石平台支架 jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀 ...

  5. Java中jdk代理和cglib代理

    代理模式 给某一个对象提供一个代理,并由代理对象控制对原对象的引用.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 在Java中代理模式从实 ...

  6. HDU 4612 Warm up —— （缩点 + 求树的直径）

    题意:一个无向图,问建立一条新边以后桥的最小数量. 分析:缩点以后,找出新图的树的直径,将这两点连接即可. 但是题目有个note:两点之间可能有重边!而用普通的vector保存边的话,用v!=fa的话 ...

  7. PHP面向对象学习-属性 类常量 类的自动加载 构造函数和析构函数 访问控制（可见性）

    在类的成员方法里面,可以用 ->(对象运算符):$this->property(其中 property 是该属性名)这种方式来访问非静态属性.静态属性则是用 ::(双冒号):self::$ ...

  8. NFFM的原理与代码

    本篇深入分析郭大nffm的代码 TensorFlow计算图 计算图的构建 ones = tf.ones_like(emb_inp_v2) mask_a = tf.matrix_band_part(on ...

  9. Arcengine获得arcgis安装的版本

    ESRI.ArcGIS.RuntimeManager.ActiveRuntime.Version  //gsioracle MessageBox.Show(ESRI.ArcGIS.RuntimeMan ...

  10. HearthBuddy CSharpCodeProvider 如何编译cs文件

    源码 源码1 namespace Hearthbuddy.Windows{    // Token: 0x02000041 RID: 65    public class MainWindow : W ...