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

时间：2025-01-13 10:34:56
 $(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_$ 累加即可

相关文章