web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
动画效果
可制作页面锚链接平滑过渡效果的jQuery插件
分类：
动画效果
日期：
2024-05-14
点击(4)
评论(0)
演 示
免费下载
简介
在页面中引入jquery和jquery.anchorScroll.js文件。 ```html <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.anchorScroll.js"></script> ``` ##### HTML结构 你可以在超链接元素上通过data-*属性来直接初始化该插件。 ```html <!-- 在body滚动时添加模糊效果 "blur-effect" --> <a href="#div-1" class="anchor-scroll" data-class-to="body" data-on-scroll="blur-effect"></a> <!-- 在滚动结束时为目标div添加弹性效果 --> <a href="#div-2" class="anchor-scroll" data-class-to="#div-2" data-scroll-end="bounce"></a> ``` - 可用的data-*属性有： - data-class-to：要添加平滑滚动事件的元素。 - data-on-scroll：在滚动时添加到指定元素上的class类。 - data-scroll-end：在滚动结束后添加到指定元素上的class类。 ##### 初始化插件 你页可以通过js代码来初始化该插件。 ```html $('.anchor-scroll').anchorScroll({ scrollSpeed: 800, // scroll speed offsetTop: 0, // offset for fixed top bars (defaults to 0) onScroll: function () { // callback on scroll start }, scrollEnd: function () { // callback on scroll end } }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
