jquery点击触发平滑的导航菜单锚点链接插件

所属分类: 网页特效-动画效果    2023-08-12 04:55:30

jquery点击触发平滑的导航菜单锚点链接插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery点击触发平滑的导航菜单锚点链接插件(共2个文件)

    • jquery.fixedheaderscroll.js
    • index.html

使用方法

(function($) {

    $.fn.fixedHeaderScroll = function(options) {

        var settings = $.extend({
            'headerSelector': 'header', // You need to designate the header element in your website.
            'offset': 0, // You can offset the scroll position.
            'smooth': true, // You can choose if you use smooth scroll or not.
            'smoothDuration': 300, // Scroll speed. (in ms)
            'smoothEasing': 'linear', // Scroll easing.
        }, options);

        function fixScroll(targetSlector) {
            if (settings.headerSelector == false) {
                var h = 0;
            } else {
                var headerEl = $(settings.headerSelector);
                var h = headerEl.outerHeight();
            }

            var targetEl = $(targetSlector);
            if( targetEl.length < 1) {
                return false;
            }
            var t = targetEl.offset().top;
            var s = t - h + settings.offset;

            if (settings.smooth) {
                $("html, body").stop(true, false).animate({
                    scrollTop: s
                }, settings.smoothDuration, settings.smoothEasing);
            } else {
                $("html, body").scrollTop(s);
            }
            return $(this);
        }

        this.unbind( "click.fixedHeaderScroll");
        this.bind( "click.fixedHeaderScroll", function (){
            fixScroll( $(this).attr("href"));
        });

        $(window).on('load', function() {
            if (location.hash) {
                fixScroll(location.hash);
                return false;
            }
        });

    };
})(jQuery);

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 动画效果

纯CSS创建的伊丽莎白女王矢量图

纯css实现的伊丽莎白女王的草图特效,它使用HTML元素来绘制面的身体各个部位,并使用CSS属性来设置样式,眼睛跟随鼠标轨迹左右转动,非常的具有动感。
  动画效果
 7620  0

javascript带贪吃蛇动画的导航菜单特效

一款锚点定位侧边栏导航菜单,滚动页面会触发显示侧边栏导航动画效果。
  动画效果
 6563  0

js+css滚动页面触发emoji表情变化动画特效

一款滚动触发表情笑脸动画特效,使用CSS和JavaScript在滚动页面时改变人脸的情绪。鼠标滚动页面时,emoji表情的眼睛、嘴巴和其他部位会随之变化。
  动画效果
 7709  0

纯CSS创建的五彩纸屑动画特效代码

基于HTML和CSS创建的奖杯动画特效,它生成五彩纸屑和庆祝动画,五彩纸屑随机洒落。
  动画效果
 4881  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论