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>

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

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

posted @ 2015-12-23 11:48  机械瞄  阅读(895)  评论(0)  编辑  收藏  举报