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. springbootdruidmybatismysql多数据源事务管理

    springboot+druid+mybatis+mysql+多数据源事务管理 分布式事务在java中的解决方案就是JTA(即Java Transaction API):springboot官方提供了 ...

  2. Python文本和字节序列

    ASCII码 早期人们用8位二进制来编码英文字母(最前面的一位是0) 也就是说,将英文字母和一些常用的字符和这128种二进制0.1串一一对应起来, 比如:大写字母“A”所对应的二进制位“0100000 ...

  3. map(callback)将一组元素转换成其他数组（不论是否是元素数组）

    map(callback) 概述 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建 ...

  4. jQuery系列（十）：事件对象

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. (1)什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给 ...

  5. 源码安装ROS Melodic Python3 指南 （转） + 安装记录

    这篇文章转自   https://blog.csdn.net/id9502/article/details/80410989  csdn真是作大死,我保存这篇博客的时候还不需要花钱就能看,现在居然要v ...

  6. Django基础之Session操作

    1. 创建一个示例 1.1 第一步 首先创建一个django项目,创建app01, 连接数据库,做好准备工作. 然后在templates目录下创建两个html: login.html负责登录页面: b ...

  7. Java 显示锁 之 重入锁 ReentrantLock（七）

    ReentrantLock 重入锁简介 重入锁 ReentrantLock,顾名思义,就是支持同一个线程对资源的重复加锁.另外,该锁还支持获取锁时的公平与非公平性的选择. 重入锁 ReentrantL ...

  8. 【洛谷4001】 [ICPC-Beijing 2006]狼抓兔子（最小割）

    传送门 洛谷 Solution 直接跑最小割板子就好了. 代码实现 #include<stdio.h> #include<stdlib.h> #include<strin ...

  9. hashcode(),equal()方法经典分析

    首先,想要明白hashCode的作用,必须要先知道Java中的集合. 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set. 前者集合内的元素是有序的,元素可以重 ...

  10. 在CUDA8.0下指定位置编译安装OpenCV3.1.0来实现GPU加速(Compiling OpenCV3.1.0 with CUDA8.0 support)

    在CUDA8.0下指定位置编译安装OpenCV3.1.0 一.本人电脑配置:ubuntu 14.04, NVIDIA GTX1060. 二.编译OpenCV3.1.0前,读者需要成功安装CUDA8.0 ...