jquer导航锚点链接动画效果和返回顶部代码

 $(function(){
     $(".index_nav li a").click(function(event){  //绑定按钮的单击事件
         var index = this.title;   //取得点击按钮的title属性，这里就是按钮的数字
 //        alert(index);
         var id = "#" + "index_" + index;   // 取得需要跳转到的div 的 id
 //        alert(id);
         $("html,body").animate({scrollTop:$(id).offset().top},1000)

     });

     $(window).scroll(function(){
             if ($(window).scrollTop()>100){ $("#goTop").slideDown(500);
             } else{
                 $("#goTop").slideUp(500);
             }
         });
         //当点击跳转链接后，回到页面顶部位置
         $("#goTop").click(function(){
         $('body,html').animate({scrollTop:0},1000); return false; });
 });

     //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
 //    $(function () {
 //        $(window).scroll(function(){
 //            if ($(window).scrollTop()>100){ $("#goTop").fadeIn(1500);
 //            } else{
 //                $("#goTop").fadeOut(1500);
 //            }
 //        });
 //        //当点击跳转链接后，回到页面顶部位置
 //        $("#goTop").click(function(){
 //            $('body,html').animate({scrollTop:0},1000); return false; });
 //    });

<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>

1、这是li -- a 的title属性要留作获取动画目标的id值，

2、h2常用锚点链接  命名  jq义字符串拼接的方式获取，每个锚点。当有多块内容时，只需要   index_$ 累加即可