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. localstorage ie11不支持

    据我所知,localstorage在高版本的ie.谷歌.火狐下都是支持的,以前没在ie上看过,不清楚,今天我用ie11打开我vue编译后的html,竟然发现不支持localstorage了,用仿真的i ...

  2. 第二个爬虫之爬取知乎用户回答和文章并将所有内容保存到txt文件中

    自从这两天开始学爬虫,就一直想做个爬虫爬知乎.于是就开始动手了. 知乎用户动态采取的是动态加载的方式,也就是先加载一部分的动态,要一直滑道底才会加载另一部分的动态.要爬取全部的动态,就得先获取全部的u ...

  3. ubuntu服务器常用命令

    1.查看系统版本 cat /etc/issue cat /etc/lsb-release 2.查看cpu lscpu 3.查看内存 free -m 4.查看硬盘大小 fdisk -l |grep Di ...

  4. Idea使用Lombok简化实体类代码

    引入相应的maven包 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lo ...

  5. SQL SERVER 表添加新字段

    SQL SERVER 表添加新字段 ALTER TABLE doc_exa ADD column_b VARCHAR(20) NULL; -- doc_exa 是表名 -- column_b 是新加的 ...

  6. import torch错误解决

    import torch出现 ”from torch._C import * ImportError: DLL load failed: 找不到指定的模块“错误这里torch=1.0.1,torchv ...

  7. Apache反向代理解析二级目录/泛目录教程/apache反向代理/apache泛目录反向代理

    同nginx一样,apache解析目录不需要安装任何东西,在配置文件里加入解析规则即可.解析规则: <IfModule mod_proxy.c> ProxyPreserveHost On ...

  8. elasticsearch利用head插件

    restful接口使用方法 RESTful接口URL的格式: http://localhost:9200///[] 其中index.type是必须提供的. id是可选的,不提供es会自动生成. ind ...

  9. 手把手教你设置MongoDB密码

    mongodb密码和传统数据如mysql等有些区别: mongodb的用户名和密码是基于特定数据库的,而不是基于整个系统的.所有所有数据库db都需要设置密码. 1. 查看所有数据库(在mongodb新 ...

  10. LeetCode 复原IP地址（探索字节跳动）

    题目描述 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&qu ...