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. 题解 【Uva】硬币问题

    [Uva]硬币问题 Description 有n种硬币,面值分别为v1, v2, ..., vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目的最小值和最大值 ...

  2. HDU 6048 - Puzzle | 2017 Multi-University Training Contest 2

    /* HDU 6048 - Puzzle [ 思维,结论 ] | 2017 Multi-University Training Contest 2 题意: 类似华容道的问题, N*M 的矩阵中N*M- ...

  3. Vue : Select

    <template> <div> <select v-model="mychoice"> <option value="html ...

  4. 响应json数据之发送ajax的请求

    一.前端异步请求代码: <span style="font-size:14px;">$.ajax ({ type: "POST", //请求的方式 ...

  5. [Python自学] day-20 (Django-ORM、Ajax)

    一.外键跨表操作(一对多) 在 [Python自学] day-19 (2) (Django-ORM) 中,我们利用外键实现了一对多的表操作. 可以利用以下方式来获取外键指向表的数据: def orm_ ...

  6. React组件式编程Demo-用户的增删改查

    1.项目结构 项目是基于webpack4, 参考 创建基本的webpack4.x项目 2.页面效果 初始化效果

  7. mysql数据库的主从同步，实现读写分离

    大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器来处理如此多的数据库连接操作,数据库必然会崩溃,特别 ...

  8. SSM框架初始配置

    1 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="h ...

  9. python 获取数字在内存的内容

    #coding=utf- from struct import pack,unpack byte=pack('f',1.5) print(byte) print([i for i in byte]) ...

  10. Spring Cloud Eureka（四）：Eureka 配置参数说明

    Eureka Client 配置项(eureka.client.*) org.springframework.cloud.netflix.eureka.EurekaClientConfigBean 参 ...