点击链接页面滑动到指定区域和图片延迟加载

JS代码

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
         
         //点击链接页面滑动到指定区域
         
        $(document).ready(function () {


            $('a').click(function () {


                var className = $.attr(this, 'href').substr(1);//获取href参数#后面的ID


                $('html, body').animate({


                    scrollTop: $("#" + className).offset().top//获取改ID的scrollTop值


                }, 700);//以700毫秒滑行


                return false;


            });
            
            
            //图片延迟加载


            $(".lazyimg").lazyload({


                placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif",//赋值延迟加载的图片


                effect: "fadeIn"


            });


        });
    </script>        //点击链接页面滑动到指定区域
         
        $(document).ready(function () {


            $('a').click(function () {


                var className = $.attr(this, 'href').substr(1);//获取href参数#后面的ID


                $('html, body').animate({


                    scrollTop: $("#" + className).offset().top//获取改ID的scrollTop值


                }, 700);//以700毫秒滑行


                return false;


            });
            
            
            //图片延迟加载


            $(".lazyimg").lazyload({


                placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif",//赋值延迟加载的图片


                effect: "fadeIn"


            });


        });
    </script>

HTML 代码

<div id="div1" style="height:500px;">1</div>
<div id="div2" style="height:500px;">2</div>
<div id="div3" style="height:500px;">3</div>
<div id="div4" style="height:500px;">4</div>
<div id="div5" style="height:500px;">5</div>
<div id="div6" style="height:500px;">6</div>
<div id="div7" style="height:500px;">7</div>
<div id="div8" style="height:500px;">8</div>
<div id="div9" style="height:500px;">9</div>
<div id="div10" style="height:500px;">10</div>
<div id="div11" style="height:500px;">12</div>

<div style="position:fixed; bottom:0px; height:36px; width:100%; background:#ff6600;">
<div class="cp_div"><a href="#div1">1</a></div>
<div class="cp_div"><a href="#div2">2</a></div>
<div class="cp_div"><a href="#div3">3</a></div>
<div class="cp_div"><a href="#div4">4</a></div>
<div class="cp_div"><a href="#div5">5</a></div>
<div class="cp_div"><a href="#div6">6</a></div>
<div class="cp_div"><a href="#div7">7</a></div>
<div class="cp_div"><a href="#div8">8</a></div>
<div class="cp_div"><a href="#div9">9</a></div>
<div class="cp_div"><a href="#div10">10</a></div>
<div class="cp_div"><a href="#div11">11</a></div>
<div class="cp_div"><a href="#div12">12</a></div>
</div>

css代码

<style>
.cp_div{
 line-height:36px;
 width:8.25%; 
 float: left; 
 border-right:#fff solid 1px; 
 text-align:center}
</style>