jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫(huà)特效代碼
更新時(shí)間：2015年10月23日 11:27:58 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫(huà)特效代碼,涉及jQuery響應(yīng)鼠標(biāo)事件結(jié)合scroll實(shí)現(xiàn)頁(yè)面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫(huà)特效。分享給大家供大家參考，具體如下：
這里演示基于jquery實(shí)現(xiàn)的分章節(jié)動(dòng)畫(huà)實(shí)現(xiàn)“回到頂部”的效果，可通過(guò) 網(wǎng)頁(yè)頂部的數(shù)字序號(hào)直接進(jìn)入網(wǎng)頁(yè)的章節(jié)，當(dāng)處于第二章節(jié)的時(shí)候，網(wǎng)頁(yè)右側(cè)會(huì)顯示豎排的控制按鈕，點(diǎn)擊按鈕會(huì)回到相應(yīng)章節(jié)，其實(shí)也就是定義好的錨點(diǎn)，當(dāng)然也可回到頂部，網(wǎng)頁(yè)上見(jiàn)到的回頂部大多不是這個(gè)樣子，所以本款效果還挺新穎。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/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錨點(diǎn)帶動(dòng)畫(huà)跳轉(zhuǎn)特效</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;
}
/*模板頭部，所有專(zhuān)題頁(yè)面公用*/
.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;}/*低版本瀏覽器防止抖動(dòng)的，必須有*/
#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;
}/*這個(gè)只能改寬高其他的不要修改，需要滾動(dòng)的內(nèi)容都要放在這個(gè)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} /*這個(gè)樣式隨便改，必須有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距瀏覽器底部和頁(yè)面內(nèi)容區(qū)域右側(cè)的距離函數(shù)#main為頁(yè)面的可視寬度
$(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距瀏覽器底部和頁(yè)面內(nèi)容區(qū)域右側(cè)的距離
$('#gotop').click(function(){
$('body,html').animate({
scrollTop: 0
},
800);//點(diǎn)擊回到頂部按鈕，緩懂回到頂部,數(shù)字越小越快
return false;
})
});
});
</script>
</head>
<body>
<div class="indexnav_wrap">
<ul class="index_nav">
<li><a href="javascript:void(0)" title="1"><i>活動(dòng)</i><strong>1</strong></a></li>
<li><a href="javascript:void(0)" title="2"><i>活動(dòng)</i><strong>2</strong></a></li>
<li><a href="javascript:void(0)" title="3"><i>活動(dòng)</i><strong>3</strong></a></li>
<li><a href="javascript:void(0)" title="4"><i>活動(dòng)</i><strong>4</strong></a></li>
<li><a href="javascript:void(0)" title="5"><i>活動(dòng)</i><strong>5</strong></a></li>
</ul>
</div>
<div class="h50"></div>
<div class="row" id="main">
<h2 id="index_1">這是第一個(gè)活動(dòng)頁(yè)</h2>
<div class="mainpage mainpage1"></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_2">這是第二個(gè)活動(dòng)頁(yè)</h2>
<div class="mainpage mainpage2"></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_3">這是第三個(gè)活動(dòng)頁(yè)</h2>
<div class="mainpage mainpage3"></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_4">這是第四個(gè)活動(dòng)頁(yè)</h2>
<div class="mainpage mainpage4"></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_5">這是第五個(gè)活動(dòng)頁(yè)</h2>
<div class="mainpage mainpage5"></div>
</div>
<div id="tbox"><!-- 這個(gè)必須有 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> <!-- 這個(gè)也是id="gotop" -->
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能示例
- 如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
- jquery實(shí)現(xiàn)點(diǎn)擊頁(yè)面回到頂部
- jquery實(shí)現(xiàn)跳到底部，回到頂部效果的簡(jiǎn)單實(shí)例(類(lèi)似錨)
- jQuery回到頂部的代碼
- jQuery實(shí)現(xiàn)帶有動(dòng)畫(huà)效果的回到頂部和底部代碼
- jquery實(shí)現(xiàn)的動(dòng)態(tài)回到頂部特效代碼
- jquery網(wǎng)頁(yè)回到頂部效果(圖標(biāo)漸隱,自寫(xiě))
- jQuery實(shí)現(xiàn)回到頂部效果
相關(guān)文章
Enter回車(chē)切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車(chē)切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下2014-09-09
ztree簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件，本文給大家簡(jiǎn)單介紹下ztree的基本知識(shí)，感興趣的朋友一起看看吧2017-07-07
Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作
這篇文章主要介紹了Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作的相關(guān)資料,需要的朋友可以參考下2015-11-11
JQ選擇器_選擇同類(lèi)元素的第N個(gè)子元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQ選擇器_選擇同類(lèi)元素的第N個(gè)子元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能
本篇文章主要介紹了使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文給大家記錄的是個(gè)人在使用$.extend 的時(shí)候遇到的一個(gè)小問(wèn)題，以及原因分析和解決方案，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類(lèi)視角
大家都知道javascript是動(dòng)態(tài)語(yǔ)言，它對(duì)動(dòng)態(tài)的支持是與身俱來(lái)的。2010-05-05
本篇文章主要是對(duì)jquery取消選擇select下拉框示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05