jquery 描点跳转

1.HTML 一个是跳转前 一个是跳转后 两个块元素不同的样式， 如下图， 在banner居中的情况下 滚动到一定高度（比如600px出现顶部滚动条）显示隐藏对应块元素

下面这个是正常的状态 小导航居中

下面这个是跳转 滑动到一定距离出现 居中对齐 全屏背景 这些都单独设置的样式

外层浮动宽度100%，里层居中

 

 

JS代码

a[href*=#] 筛选a标签属性href 带有#的匹配元素

1、点击小导航滑动到对应位置上，URL后不带参数，实现效果用的是jquery 的animate()方法 scrollTop     √

2、鼠标滚轮滑动 显示对应位置   ×

3、js load载入的页面的导航 不能绑定事件  ×

<script type="text/javascript">

$(function(){
    $('.anli-class a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top-120;
                $('html,body').animate({
                            scrollTop: targetOffset
                        },
                        1000);

                $('.anli-w100-bg1 ul.anli-class').css({"left":"0","right":"0"});

                if(top>600){

                    $(".anli-class").hide();
                    $(".anli-w100-bg1 .anli-class ， .anli-w100-bg1").show()



                }else {

                    $(".anli-class").show();
                    $(".anli-w100-bg1 .anli-class ， .anli-w100-bg1").hide()


                }


                return false;
            }
        }
    });
});
    
</script>

 

PS:JS控制行为 CSS控制样式 　　

position fixed 滚动 居中

HTML结构 外层DIV  

anli-w100-bg1  CSS

an-class 关键css居中 定义宽度 margin:auto;left right;

 

还有的问题：

顶部菜单导航 二级描点跳转 无法实现效果;