jQuery 锚文本滚动

2015 Jul 19, 15:37:24

最近项目需要做一个简单的导航栏，需要在页面滚动时自动置顶在上方，并为其中的链接添加 anchor；实现方法是使用 jQuery，下面是简单实现的代码，做个记录。

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Test</title>
	<style type="text/css">
		div {border: 1px solid red; margin: 10px auto; color: #000; text-align: center;}
		.header	{background-color: #f00; height: 100px; width: 500px;}
		.tab {background-color: #0f0; height: 20px; width: 500px;}
		.footer {background-color: #00f; height: 2000px; width: 500px;}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function () {
			//get tabs offset.top
			var tab = $('.tab');
			var tabTop = 99999;
			if (tab.length) {
				tabTop = tab.offset().top;
			}
			//set jQuery scroll event
			$(window).scroll(function () {
				if (tab.length && $(window).scrollTop() > tabTop) {
					tab.css('position', 'fixed');
					tab.css('width', '100%');
					tab.css('top', '0');
				} else {
					tab.css('position', '');
					tab.css('width', '500px');
				}
			});
			//smooth scrolling to anchor
			$('a[href^="#"]').on('click', function (e) {
				e.preventDefault();

				var target = this.hash;
				var $target = $(target);

				$('html, body').stop().animate({'scrollTop':$target.offset().top}, 900, 'swing', function () {
					window.location.hash = target;
				});
			});
		});
	</script>
</head>
<body>
	<div class="header" id="header">header</div>
	<div class="tab">tab--<a href="#header">Go to top</a></div>
	<div class="footer">footer</div>
</body>
</html>