JQ锚点动画滚动-阿里云开发者社区

JQ锚点动画滚动

2017-11-10 1781

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQ锚点动画滚动

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>JQ滚动特效</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			ul,li{
				list-style: none;
			}
			.header{
				height: 300px;
			}
			.header ul li{
				float: left;
				padding: 20px;
				margin-right: 20px;
				background-color: #FFC0CB;
			}
			.content div{
				height: 300px;
				border: 1px solid pink;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
		<script type="text/javascript">
			
/*			$(document).ready(function() {
			  $("a.topLink").click(function() {
			    $("html, body").animate({
			      scrollTop: $($(this).attr("href")).offset().top + "px"
			    }, {
			      duration: 500,
			      easing: "swing"
			    });
			    return false;
			  });
			});*/
			
			/*锚点滚动特效function封装*/
			$(function(){  
			  $('a[href*=#],area[href*=#]').click(function() {
			    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
			      var $target = $(this.hash);
			      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
			      if ($target.length) {
			        var targetOffset = $target.offset().top;
			        $('html,body').animate({
			          scrollTop: targetOffset
			        },
			        1000);
			        return false;
			      }
			    }
			  });
			})
		</script>
	</head>

	<body>
		<div class="warpper">
			<!--nav-->
			<div class="header">
				<ul>
					<li><a href="#content1">qqqqq</a></li>
					<li><a href="#content2">qqqqq</a></li>
					<li><a href="#content3">qqqqq</a></li>
					<li><a href="#content4">qqqqq</a></li>
					<li><a href="#content5">qqqqq</a></li>
				</ul>
			</div>
			
			
			<div class="content">
				<div id="content1">
					<h1>54666645646565</h1>
				</div>
				<div id="content2">
					<h1>54666645646565</h1>
				</div>
				<div id="content3">
					<h1>54666645646565</h1>
				</div>
				<div id="content4">
					<h1>54666645646565</h1>
				</div>
				<div id="content5">
					<h1>54666645646565</h1>
				</div>
			</div>
			
			
		
		</div>
	</body>
</html>

原文链接：http://www.cnblogs.com/jiahuasir/p/7804497.html

JQ锚点动画滚动

热门文章

最新文章

相关电子书