<!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