首页>前端教程>jQuery教程

纯js实现单页面锚点之间页面滑动效果,可以设置偏移值哟!

网上很多页面滑动都是满屏滑动效果,但是有时候不需要满屏滑动,而是想滑动到哪里就滑动到哪里,可以自由设置滑动的位置,那么这个纯js脚本可以满足这个要求,关键是可以设置偏移值,太美好了。

smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件。通过该锚链接插件,可以在点击页面的锚链接时,以指定的过渡动画平滑滚动页面。

单页面锚点滑动效果.jpg

具体案例效果可以查看站酷的该专题页:http://www.zcool.com.cn/special/biye2017/

效果展示

插件下载

链接:http://pan.baidu.com/s/1migIqE0 密码:67mz

具体使用方法:

1、在页面中引入smooth-scroll.js文件。

<script src="dist/smooth-scroll.js"></script>

2、HTML结构

在页面中构建锚链接,通过<a>标签的href属性指向需要跳转到的锚链接元素,并为<a>元素设置data-scroll属性。

<a data-scroll href="#bazinga">Anchor Link</a>
...
<h3 id="bazinga">跳转到这里</h3>

3、初始化插件

在页面的底部,通过smoothScroll.init()方法来初始化该锚链接平滑过渡插件

<script type="text/javascript">
    smoothScroll.init();
</script>

4、配置参数

你可以在init()方法中传入配置参数或回调函数。

smoothScroll.init({    
selector: '[data-scroll]', // Selector for links (must be a valid CSS selector)    
selectorHeader: '[data-scroll-header]', // Selector for fixed headers (must be a valid CSS selector)    
speed: 500, // Integer. How fast to complete the scroll in milliseconds    
easing: 'easeInOutCubic', // Easing pattern to use    
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels    
updateURL: true, // Boolean. If true, update the URL hash on scroll    
callback: function ( anchor, toggle ) {} // Function to run after scrolling});
  • selector:锚链接的CSS选择器。

  • selectorHeader:固定头部的选择器。

  • speed:完成滚动动画的时间,单位毫秒。

  • easing:easing过渡动画效果。

  • offset:滚动的偏移距离,单位像素。

  • updateURL:是否在滚动时更新UTL的hash地址。

  • callback:回调函数。

Easing动画参数:

  • Linear:线性动画。

  • Ease-In:速度逐渐增加。

    • easeInQuad

    • easeInCubic

    • easeInQuart

    • easeInQuint

  • Ease-In-Out:速度先逐渐增加,然后逐渐减小。

    • easeInOutQuad

    • easeInOutCubic

    • easeInOutQuart

    • easeInOutQuint


  • Ease-Out:速度逐渐减小。

    • easeOutQuad

    • easeOutCubic

    • easeOutQuart

    • easeOutQuint

通过data属性来覆盖配置:

你也可以通过data-options属性来覆盖配置参数。例如:

<a data-scroll
   data-options='{
                    "speed": 500,
                    "easing": "easeInOutCubic",
                    "offset": 0
                }'
>
    Anchor Link
</a>

5、小技巧

固定头部

为你的固定头部添加data-scroll-header属性,插件将会自动根据头部的高度来偏移滚动距离。

<nav data-scroll-header>
    ...
</nav>

具体详细介绍可以查看网址:http://www.htmleaf.com/jQuery/Text-Link-Effects/201607083705.html

点赞


3
保存到:

相关文章

Top