jQuery页面内滑动到锚点导航效果，回到顶部

最新推荐文章于 2023-06-12 21:24:37 发布

笨-大叔

最新推荐文章于 2023-06-12 21:24:37 发布

阅读量2.1k

点赞数

分类专栏： jquery JS 文章标签： js jquery 回到顶部滑动锚点

本文链接：https://blog.csdn.net/u014703834/article/details/39152619

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

在看别人的网页的时候，有些页面很长，但是中滑动到固定锚点的导航，感觉效果甚是不错。于是便自己仿照着写了一个，代码不是很精辟，但是实现了效果。希望对一些初学者有帮助，也希望大声多给建议（最后有本效果的资源免费下载地址）……

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