jQuery頁面內滑動到錨點導航效果，回到頂部

原創

2020-02-22 13:31

在看別人的網頁的時候，有些頁面很長，但是中滑動到固定錨點的導航，感覺效果甚是不錯。於是便自己仿照着寫了一個，代碼不是很精闢，但是實現了效果。希望對一些初學者有幫助，也希望大聲多給建議（最後有本效果的資源免費下載地址）……

js代碼：

/**
 * @author Administrator
 */
$(document).ready(function(event){
	//主要的
	$("#menu a,.this").click(function(event){
		var index=this.title;
		var id="#index0"+index;
		$("html,body").animate({scrollTop: $(id).offset().top}, 1000);
	});
	//返回頂部
	$("#getTop").click(function(event){
		$("body,html").animate({scrollTop: 0},800);
	});
	
	$(window).scroll(function(){
    	t = $(document).scrollTop();
    	if(t>500){
      		$('#bottomNavigation').show("slow");
      		return false;
    	}else{
      		$('#bottomNavigation').hide("slow");
    	}
	}); 
	 
	//左邊的定位導航顯示位置，x越大，越靠左邊
	function position(x,y){
		//獲取可視窗口寬度
		var windowW=$(document.body).width();//1423
		//獲取主體div的寬度
		var divW=$(".container").width();
		$("#bottomNavigation").css("right",(windowW/2-divW/2-x)+"px");
		$("#bottomNavigation").css("bottom",(y)+"px");
	}
	position(80,50);

});

html代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>getTop</title>
		<meta name="author" content="Administrator" />
		<link href="getTop.css" type="text/css" rel="stylesheet" />
		<script src="../jquery.min.11.1.js" type="text/javascript"></script>
		<script src="index.js" type="text/javascript"></script>
		<!-- Date: 2014-09-05 -->
	</head>
	<body>
		<div class="navigation" id="menu">
			<a href="javascript:void(0)" title="1">A</a>
			<a href="javascript:void(0)" title="2">B</a>
			<a href="javascript:void(0)" title="3">C</a>
			<a href="javascript:void(0)" title="4">D</a>
			<a href="javascript:void(0)" title="5">E</a>
		</div>
		
		<div class="container" id="index01" style="background:#E1EED2">A</div>
		<div class="container" id="index02" style="background:#F1EED3">B</div>
		<div class="container" id="index03" style="background:#C2C2C2">C</div>
		<div class="container" id="index04" style="background:#E69B02">D</div>
		<div class="container" id="index05" style="background:#FF4200">E</div>
		
		<div class="bottomNavigation" id="bottomNavigation">
			<a class="this" href="javascript:void(0)" title="1">A</a>
			<a class="this" href="javascript:void(0)" title="2">B</a>
			<a class="this" href="javascript:void(0)" title="3">C</a>
			<a class="this" href="javascript:void(0)" title="4">D</a>
			<a class="this" href="javascript:void(0)" title="5">E</a>
			<a id="getTop" href="javascript:void(0)">top</a>
		</div>
	</body>
</html>

css代碼：

*{
	margin:0;
	padding:0;
}
body{
	background:#333333;
}
.navigation{
	margin:0 auto;
	width:500px;
	height:100px;
}
.navigation a{
	width:100px;
	height:100px;
	font-size:30px;
	line-height: 100px;
	text-align:center;
	background: #E69B02;
	float:left;
	display:block;
}
.navigation a:link{
	color:#000000;
	text-decoration: none;
}
.navigation a:visited{
	color:#000000;
}
.navigation a:hover{
	background:#A8CF33;
}

.container{
	margin:30px auto;
	width:1002px;
	height: 800px;
	font-size:100px;
	text-align:center;
}

.bottomNavigation{
	width:25px;
	height:150px;
	position: fixed;
	background: #0093DD;
	display:none;
}
.bottomNavigation a{
	width:25px;
	height:25px;
	font-size:12px;
	line-height: 25px;
	text-align:center;
	background: #E69B02;
	display:block;
}
.bottomNavigation a:link{
	color:#000000;
	text-decoration: none;
}
.bottomNavigation a:visited{
	color:#000000;
}
.bottomNavigation a:hover{
	background:#A8CF33;
}

資源下載地址：http://download.csdn.net/detail/u014703834/7882775