js定位导航菜单,比瞄点定位好用多了

 分类:js特效时间:2017-09-24点击:

   作为前端工作人员,都知道锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。但是点击瞄点超链接后,发现定位不准确,不能随心所欲,这下很苦逼,,,下面的这个js定位导航菜单定位很精准,比瞄点定位好用多了,,精准都可以自由调整。

请看代码:

<!Doctype html>
<html>
<head>
    <meta charset="gb2312">
    <title>js定位导航菜单</title>
    <style type="text/css">
        *{margin:0;padding:0;}  .w{width:1200px;margin:0 auto;}
        .nav{height:56px;margin-top:500px;margin-bottom:200px;}
        .box{border:1px solid red;height:800px;margin-bottom:200px;}
        .nav,#scroll_nav{width:100%;background:#7a3e47;color:#fff;position:relative;}
        #scroll_nav .pubW_c{height:56px;}
        #scroll_nav ul {margin-left:32px;}
        #scroll_nav ul li{font-size:20px;float:left;display:inline;
        width:152px;text-align:center;line-height:56px;color:#fff;}
        #scroll_nav ul li a{color:#fff; width:152px;height:56px;margin:0 auto;display:block;}
        #scroll_nav ul li a:hover,
        #scroll_nav ul li a.active{color:#7a3e47;background:#fff;text-decoration:none;}
    </style>
</head>
<body>
    <div class="nav oh">
        <div id="scroll_nav">
            <div class="pubW_c w">
                <ul class="fl">
                    <li><a href="javascript:void(0);">box01</a></li>
                    <li><a href="javascript:void(0);">box02</a></li>
                    <li><a href="javascript:void(0);">box03</a></li>
                    <li><a href="javascript:void(0);">box04</a></li>

                </ul>
            </div>
        </div>
    </div>
    <div class="box w scroll_top">我是box01</div>
    <div class="box w scroll_top">我是box02</div>
    <div class="box w scroll_top">我是box03</div>
    <div class="box w scroll_top">我是box04</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    (function($) {
        $.fn.navScroll = function(o) {
            o = $.extend({
                navAddClass: 'cur',
                conAddClass: 'posi',
                navH: 60,
                speedArg: 7
            }, o || {});

            var navAdd = o.navAddClass,
            conAdd = o.conAddClass,navH = o.navH,speedArg = o.speedArg;
            var _el = $(this),arrPos = [],timer = null;

            $('.' + conAdd + '').each(function() {
                arrPos.push($(this).offset().top);
            });

            _el.each(function(index) {
                $(this).attr('index', index);
                $(this).bind('click',
                    function() {
                        $(window).unbind('scroll', WinScroll);

                        _el.each(function() {
                            $(this).removeClass(navAdd);
                        });

                        $(this).addClass(navAdd);

                        fnScroll($(this));
                    });
            });

            function fnScroll(obj) {
                var iSpeed = 0;
                var iTarget = arrPos[obj.attr('index')]-navH;
                //alert(iTarget);
                clearInterval(timer);

                timer = setInterval(function() {
                        var oLength=$("#scroll_nav a").length;
                        var cur = $(document).scrollTop(),
                        clientH = $(window).height(),docH = $(document).height();
                        //alert(cur+"   "+clientH+"   " +docH+"  "+iTarget);
                        if(obj.attr('index')==oLength-1){
                            if((cur+clientH)>=docH){

                                iTarget=docH-clientH;
                                //alert(iTarget);
                            }
                        }
                        iSpeed = (iTarget - cur) / speedArg;
                        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)

                        if (Math.abs(iTarget - cur) < 1) {
                            clearInterval(timer);
                            window.scrollTo(0, iTarget);
                            $(window).bind('scroll', WinScroll);
                        } else {
                            window.scrollTo(0, cur + iSpeed);
                        }
                    },
                    30);
            }

            function WinScroll() {
                var cur = $(document).scrollTop()+navH;

                $.each(arrPos,
                    function(i) {

                        if (cur >= arrPos[i]) {
                            if (cur < arrPos[i + 1]) {

                                _el.each(function() {
                                    if ($(this).attr('index') == i) {
                                        $(this).addClass(navAdd);
                                    } else {
                                        $(this).removeClass(navAdd);
                                    }
                                });
                            } else {
                                _el.each(function() {

                                    if ($(this).attr('index') == arrPos.length - 1) {
                                        $(this).addClass(navAdd);
                                    } else {
                                        $(this).removeClass(navAdd);
                                    }
                                });
                            }
                        }
                    });

            };
            $(window).on('scroll', WinScroll);
        };

    })(jQuery);

    $('#scroll_nav ul li a').navScroll({
        navAddClass: 'active',
        conAddClass: 'scroll_top',
        navH: 70,
        speedArg: 7
    });
    window.onload = window.onscroll = function() {
        var oNav=document.getElementById('scroll_nav');
        var oTop = document.documentElement.scrollTop || document.body.scrollTop;
        //alert(oTop);
        if (oTop >= 600) {
            if (typeof document.body.style.maxHeight === "undefined") {
                oNav.style.top = oTop + 'px';
            } else {
                oNav.style.position = 'fixed';
                oNav.style.top = 0;
                oNav.style.zIndex=999999;
            }
        } else {
            oNav.style.position = 'absolute';
            oNav.style.top = 0+"px";
        }
    };
</script>
</body>
</html>


点击演示特效下载

除注明外的文章,均为来源:(QQ:1917843637),转载请保留本文地址!