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. Spring Boot 跨域访问

    如何在 Spring Boot 中配置跨域访问呢? Spring Boot 提供了对 CORS 的支持,您可以实现WebMvcConfigurer 接口,重写addCorsMappings 方法来添加 ...

  2. 如何在 Laravel 项目中处理 Excel 文件

    1.Laravel Excel Laravel Excel 是一款基于PHPExcel开发的Laravel框架专用的Excel/CSV 文件导入导出功能的扩展包,用起来的非常方便.它的Github地址 ...

  3. 富文本编辑器复制粘贴word

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  4. (七)对话框,单选框(radiobox),复选框(checkbox),列表框(ListBox),组合框(CComboBox),水平滚动条(Horizontal scroll bar),微调(旋转)spincontrol,列表视图控件CListCtrl,静态控件static

    1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...

  5. x86—EFLAGS寄存器详解[转]

    鉴于EFLAGS寄存器的重要性,所以将这一部分内容从处理器体系结构及寻址模式一文中单独抽出另成一文,这部分内容主要来自Intel Developer Mannual,在后续的内核系列中遇到的许多和EF ...

  6. 微信内置浏览器不支持APK附件下载的原因

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...

  7. 2017 ZSTU寒假排位赛 #8

    题目链接:https://vjudge.net/contest/149845#overview. A题,水题. B题,给出 p个 第一个人的区间 和 q个第二个人的区间,问[l,r]中有多少个整数满足 ...

  8. 03 HTTP协议与HTTPS协议

    一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...

  9. Eratos筛法(筛选素数)

    对于n以内的非素数必有k*n1=n(n1<n)  所以 可有p1,2p2,3p3把非素数筛选掉 实现代码: #include<iostream> #include<string ...

  10. Flume-日志聚合

    Flume-1 监控文件 /tmp/tomcat.log. Flume-2 监控某一个端口的数据流. Flume-1 与 Flume-2 将数据发送给 Flume-3,Flume-3 将最终数据打印到 ...