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" width="1156" height="650" /></div>
</div>
</div>
1、这是li -- a 的title属性要留作获取动画目标的id值，
2、h2常用锚点链接 命名 jq义字符串拼接的方式获取，每个锚点。当有多块内容时，只需要 index_$ 累加即可
时间： 2024-12-28 12:02:57