Click on the link page to slide to the specified area and image lazy loading

 

JS code

 

<script type="text/javascript" src="Js/jquery - 1.7.2. Min. Js." "></script>
Copy the code

 <script type="text/javascript">
         
		 // Click the link page to slide to the specified area
		 
        $(document).ready(function () {$('a').click(function () {


                var className = $.attr(this.'href').substr(1);// Get the ID after the href argument #


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


                    scrollTop: $("#" + className).offset().top// Get the scrollTop value of the change ID


                }, 700);// Taxi in 700 milliseconds


                return false;


            });
			
			
			// Image lazy loading


            $(".lazyimg").lazyload({


                placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif".// Assign a lazy loading image


                effect: "fadeIn"


            });


        });
    </script> /$(document).ready(function () {$('a').click(function () {var className = $.attr(this, 'href').substr(1); /.animate({scrollTop: $("#" + className).offset().top/}, 700); /Return false; }); /$(".lazyimg").lazyload({placeholder: "/App/Tpl/Wap/Default/Public/images/grey.gif",// Assign lazy loading image effect:"fadeIn"}); }); Copy the code

 

 

 

The HTML code

 

 

<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>
Copy the code

 

 

 

 

 

CSS code

 

 

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

 

 

 

 

 

Image lazy loading – read on

 

 

JQuery. The lazyload explanation

 

 

 

www.cnblogs.com/wenbo/archi…

 

 

Lazyload lazy loading effect

www.cnblogs.com/cloudgamer/…

 

 

 

 

 

ImagesLazyLoad Image lazy loading effect

www.cnblogs.com/cloudgamer/…