限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

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

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

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

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

    • jquery.fixedheaderscroll.js
    • index.html

使用方法

  • code
  • source
  1. (function($) {
  2. $.fn.fixedHeaderScroll = function(options) {
  3. var settings = $.extend({
  4. 'headerSelector': 'header', // You need to designate the header element in your website.
  5. 'offset': 0, // You can offset the scroll position.
  6. 'smooth': true, // You can choose if you use smooth scroll or not.
  7. 'smoothDuration': 300, // Scroll speed. (in ms)
  8. 'smoothEasing': 'linear', // Scroll easing.
  9. }, options);
  10. function fixScroll(targetSlector) {
  11. if (settings.headerSelector == false) {
  12. var h = 0;
  13. } else {
  14. var headerEl = $(settings.headerSelector);
  15. var h = headerEl.outerHeight();
  16. }
  17. var targetEl = $(targetSlector);
  18. if( targetEl.length < 1) {
  19. return false;
  20. }
  21. var t = targetEl.offset().top;
  22. var s = t - h + settings.offset;
  23. if (settings.smooth) {
  24. $("html, body").stop(true, false).animate({
  25. scrollTop: s
  26. }, settings.smoothDuration, settings.smoothEasing);
  27. } else {
  28. $("html, body").scrollTop(s);
  29. }
  30. return $(this);
  31. }
  32. this.unbind( "click.fixedHeaderScroll");
  33. this.bind( "click.fixedHeaderScroll", function (){
  34. fixScroll( $(this).attr("href"));
  35. });
  36. $(window).on('load', function() {
  37. if (location.hash) {
  38. fixScroll(location.hash);
  39. return false;
  40. }
  41. });
  42. };
  43. })(jQuery);
(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. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 动画效果

纯CSS3实现的鱼缸生态场景动画特效

一款动态的鱼缸场景动画效果,水面随机的波纹动画、鱼群游动,以及SVG过滤器创建逼真的仿真效果。
  动画效果
 1226  0

jquery交互式水波动画特效代码

一款鼠标点击交互波纹动画效果,鼠标点击页面随机触发逼真的波纹动画特效。
  动画效果
 2266  0

原生js文字弹幕动画特效

一款自定义的文字弹幕动画特效代码,可设置不同颜色的icon图标!
  动画效果
 1350  0

Three dot创建的多种形态的CSS加载动画

一组由三个小圆点创建的loading加载动画效果,包括:360度旋转、淡出淡入、摇摆转圈、跳动等20种动画加载特效。
  动画效果
 6439  0

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

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