jquer導航錨點連接動畫效果和返回頂部代碼

 1 $(function(){
 2     $(".index_nav li a").click(function(event){  //綁定按鈕的單擊事件
 3         var index = this.title;   //取得點擊按鈕的title屬性，這裏就是按鈕的數字
 4 //        alert(index);
 5         var id = "#" + "index_" + index;   // 取得須要跳轉到的div 的 id
 6 //        alert(id);
 7         $("html,body").animate({scrollTop:$(id).offset().top},1000)
 8         
 9     });
10     
11     $(window).scroll(function(){ 
12             if ($(window).scrollTop()>100){ $("#goTop").slideDown(500); 
13             } else{
14                 $("#goTop").slideUp(500); 
15             } 
16         });  
17         //當點擊跳轉連接後，回到頁面頂部位置  
18         $("#goTop").click(function(){ 
19         $('body,html').animate({scrollTop:0},1000); return false; }); 
20 });
21 
22 
23     //當滾動條的位置處於距頂部100像素如下時，跳轉連接出現，不然消失 
24 //    $(function () { 
25 //        $(window).scroll(function(){ 
26 //            if ($(window).scrollTop()>100){ $("#goTop").fadeIn(1500); 
27 //            } else{
28 //                $("#goTop").fadeOut(1500); 
29 //            } 
30 //        });  
31 //        //當點擊跳轉連接後，回到頁面頂部位置  
32 //        $("#goTop").click(function(){ 
33 //            $('body,html').animate({scrollTop:0},1000); return false; }); 
34 //    });

<div id="wrapper">
            <ul class="index_nav">
                <li><a href="javascript:void(0)" title="1"><i>主題</i><strong>1</strong></a></li>
                <li><a href="javascript:void(0)" title="2"><i>主題</i><strong>2</strong></a></li>
                <li><a href="javascript:void(0)" title="3"><i>主題</i><strong>3</strong></a></li>
                <li><a href="javascript:void(0)" title="4"><i>主題</i><strong>4</strong></a></li>
                <li><a href="javascript:void(0)" title="5"><i>主題</i><strong>5</strong></a></li>
            </ul>
            
            <div class="row" id="main">
                <h2 id="index_1">新年快樂</h2>
                <div class="mainpage1"><img src="img/bg_3.jpg" alt="" width="1156" height="650" /></div>
            </div>
        </div>

一、這是li -- a 的title屬性要留做獲取動畫目標的id值，

二、h2經常使用錨點連接  命名  jq義字符串拼接的方式獲取，每一個錨點。當有多塊內容時，只須要   index_$ 累加便可