本文實例講述了jQuery實現分章節錨點“回到頂部”動畫特效。分享給大家供大家參考，具體如下：
這里演示基于jquery實現的分章節動畫實現“回到頂部”的效果，可通過 網頁頂部的數字序號直接進入網頁的章節，當處于第二章節的時候，網頁右側會顯示豎排的控制按鈕，點擊按鈕會回到相應章節，其實也就是定義好的錨點，當然也可回到頂部，網頁上見到的回頂部大多不是這個樣子，所以本款效果還挺新穎。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-turn-top-focus-style-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery錨點帶動畫跳轉特效</title><script src="jquery-1.6.2.min.js" type="text/javascript"></script><style>.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}/* reset */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset, img { border:0;}ul,li { list-style:none;}body { background: #f1f1f1; color: #666; font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"/5B8B/4F53";}.row:after { clear:both; content:'/0020'; display:block; height:0;}.row { zoom:1;}/*鏈接顏色*/a,button{outline:none; /*移除虛線框 IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}a{ color:#999; text-decoration:none;}a:hover{ color:#be0000; text-decoration: underline;}.fst{ font-family: "/5B8B/4F53";}h1,h2,h3,h4,h5,h6{font-family:/5FAE/8F6F/96C5/9ED1; font-size: 16px;}/* end reset */.row{ width:1000px; margin:0 auto;}/*模板頭部，所有專題頁面公用*/.index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}.index_nav li{width: 115px; height: 70px; float: left;}.index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}.index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}.index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}.index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}.h15{height: 15px; overflow: hidden;}.mainpage{width: 1000px; height:1000px;}h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}.mainpage1{background: #fe6400;}.mainpage2{background: #be0000;}.mainpage3{background: #ccc;}.mainpage4{background: #0093dd;}.mainpage5{background: #a8cf33;}*html{background-image:url(about:blank);background-attachment:fixed;}/*低版本瀏覽器防止抖動的，必須有*/#tbox{width:30px; height:200px; float:right; position:fixed; display: none;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:50px;}/*這個只能改寬高其他的不要修改，需要滾動的內容都要放在這個div里面*/.taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}.taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}#gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(images/top_icon.gif) no-repeat; position:absolute; display:none; cursor:pointer} /*這個樣式隨便改，必須有position:absolute; */#gotop:hover{background-position: 0 -30px;}</style><script type="text/javascript"> jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); $(".taoba").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); function a(x,y){ l = $('#main').offset().left; w = $('#main').width(); $('#tbox').css('left',(l + w + x) + 'px'); $('#tbox').css('bottom',y + 'px');}//獲取#tbox的div距瀏覽器底部和頁面內容區域右側的距離函數#main為頁面的可視寬度$(function() { $(window).scroll(function(){ t = $(document).scrollTop(); if(t>500){ $('#tbox').show(); }else{ $('#tbox').hide(); } if(t > 50){ $('#gotop').fadeIn('slow'); }else{ $('#gotop').fadeOut('slow'); } }) a(10,100);//#tbox的div距瀏覽器底部和頁面內容區域右側的距離 $('#gotop').click(function(){ $('body,html').animate({ scrollTop: 0 }, 800);//點擊回到頂部按鈕，緩懂回到頂部,數字越小越快 return false; })}); });</script></head><body><div class="indexnav_wrap"> <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><div class="h50"></div><div class="row" id="main"> <h2 id="index_1">這是第一個活動頁</h2> <div class="mainpage mainpage1"></div></div><div class="h15"></div><div class="row"> <h2 id="index_2">這是第二個活動頁</h2> <div class="mainpage mainpage2"></div></div><div class="h15"></div><div class="row"> <h2 id="index_3">這是第三個活動頁</h2><div class="mainpage mainpage3"></div></div><div class="h15"></div><div class="row"> <h2 id="index_4">這是第四個活動頁</h2> <div class="mainpage mainpage4"></div></div><div class="h15"></div><div class="row"> <h2 id="index_5">這是第五個活動頁</h2> <div class="mainpage mainpage5"></div></div><div id="tbox"><!-- 這個必須有 id="tbox"--> <a class="taoba" href="javascript:void(0)" title="1">1</a> <a class="taoba" href="javascript:void(0)" title="2">2</a> <a class="taoba" href="javascript:void(0)" title="3">3</a> <a class="taoba" href="javascript:void(0)" title="4">4</a> <a class="taoba" href="javascript:void(0)" title="5">5</a> <a id="gotop" href="javascript:void(0)" title="回到頂部">回到頂部</a> <!-- 這個也是id="gotop" --></div></div></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
