smoothscroll

smoothscroll是一款jQuery插件，可以平滑地滚动到指定的地方。

可以解决chrome锚点失效的问题。

官方网站 http://iamdustan.com/smoothscroll/

github地址 https://github.com/iamdustan/smoothscroll

h5代码:

<a href="javascript:void(0)" οnclick="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)" οnclick="gotoTest1()">首页</a></li><li><a href="javascript:void(0)" οnclick="gotoTest2()">购物</a></li><li><a href="javascript:void(0)" οnclick="gotoTest3()">博客</a></li><li><a href="javascript:void(0)" οnclick="gotoTest4()">服务</a></li><li><a href="javascript:void(0)" οnclick="gotoTest5()">联系我们</a></li><li><a href="javascript:void(0)" οnclick="gotoTest6()">关于我们</a></li><li><a href="javascript:void(0)" οnclick="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>

示例图片

转载于:https://www.cnblogs.com/max-hou/p/10964330.html

smoothscroll相关推荐

ViewPager撤消左右滑动切换功能
ViewPager取消左右滑动切换功能最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...
android 释放 so,这 10 个值得开启的隐藏功能，让你的 Chrome 释放更多潜力
上次分享了让 Chrome 浏览器用得更顺手的地址栏命令,跟大家整理和介绍了多个 Chrome 地址栏命令,利用好这些命令工具能够提升浏览器配置效率,让你的 Chrome 浏览器用得更顺手. 这次介绍 ...
vue连线插件_vue 插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
java前端目录_[Java教程]前端那点事儿——Tocify自动生成文档目录
[Java教程]前端那点事儿--Tocify自动生成文档目录 0 2016-06-29 22:00:07 今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目 ...
使用Scroller实现弹性滑动
scrollTo.scrollBy View内部为了实现滑动提供了这两个方法,但是使用这两个方法滑动的效果是瞬间的不够平滑,如何实现View的弹性滑动呢?这正是本博文讨论的主题.另外这两个函数滑动的是 ...
android ViewPager 不带滑动效果切换item
其实这是很简单的,但是今晚脑袋晕乎乎的绕了一大圈,记录一下以警同类人. 只需要在setCurrentItem传参数时这么写:mViewPager.setCurrentItem(item序号,fal ...
Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. http://ww ...
前端那点事儿——Tocify自动生成文档目录
今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目录的焦点. 效果框架原来使用的是一个开源的jquery-ui控件--tocify.js,它可以遍历页面 ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

smoothscroll

smoothscroll相关推荐

最新文章

热门文章